@solidstarters/solid-core-ui 1.0.2 → 1.1.1

package/src/components/auth/SolidRegister.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useRegisterMutation } from "@/redux/api/authApi";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query/react";
+import { useFormik } from "formik";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { Password } from "primereact/password";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { ChangeEventHandler, useContext, useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
+import { LayoutContext } from "../layout/context/layoutcontext";
+
+const SolidRegister = () => {
+    const { layoutConfig } = useContext(LayoutContext);
+    const { authLayout } = layoutConfig;
+    const toast = useRef<Toast>(null);
+    const [password, setPassword] = useState("");
+    const [checked, setChecked] = useState<boolean>(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const [user, setUser] = useState({
+        name: "",
+        email: "",
+        password: "",
+    });
+
+    const validationSchema = Yup.object({
+        username: Yup.string().required("User Name is required"),
+        email: Yup.string()
+            .email("Invalid email address")
+            .required("Email is required"),
+        password: Yup.string().required("Password is required"),
+    });
+
+    const router = useRouter();
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    const [register, { isLoading, error, isSuccess, data }] = useRegisterMutation();
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+        setUser({ ...user, [e.target.name]: e.target.value });
+    };
+
+    const initialValues = {
+        username: "",
+        email: "",
+        password: "",
+    }
+
+    const formik = useFormik({
+        initialValues,
+        validationSchema,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            try {
+                const userData = {
+                    username: values.username,
+                    email: values.email,
+                    password: values.password,
+                };
+
+                await register(userData);
+            } catch (err) {
+                console.log('inside', err);
+            }
+        }
+    });
+
+    const showError = () => {
+        if (error) {
+            if ("data" in error) {
+                const apiError = error as FetchBaseQueryError;
+                const errorMessages = Array.isArray(apiError.data?.message)
+                    ? apiError.data?.message
+                    : [apiError.data?.message];
+
+                toast.current?.show({
+                    severity: "error",
+                    summary: "Error",
+                    detail: errorMessages.join(", "),
+                    life: 3000,
+                });
+            } else {
+                const serializedError = error as Error;
+                toast.current?.show({
+                    severity: "error",
+                    summary: "Error",
+                    detail: serializedError.message || "An error occurred",
+                    life: 3000,
+                });
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (error) {
+            showError();
+        }
+    }, [error]);
+
+    useEffect(() => {
+        if (isSuccess) {
+            router.replace("/auth/login");
+        }
+    }, [isSuccess])
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`}>
+                <div className="flex justify-content-center">
+                    <div className="solid-logo flex align-items-center gap-3">
+                        <img
+                            alt="solid logo"
+                            src={'/images/SS-Logo-1 1.png'}
+                            className="position-relative img-fluid"
+                        />
+                        <div>
+                            <p className="solid-logo-title">
+                                Solid<br />Starters
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <h2 className="solid-auth-title text-center">Sign Up To Your Account</h2>
+                <p className="solid-auth-subtitle text-sm">By continuing, you agree to the <Link href={'#'}>Terms of Service</Link> and acknowledge you’ve read our  <Link href={'#'}>Privacy Policy.</Link> </p>
+                <>
+                    <form onSubmit={formik.handleSubmit}>
+                        <div className="grid">
+                            <div className="col-6">
+                                <div className="flex flex-column gap-2">
+                                    <label htmlFor="email" className="solid-auth-input-label">First Name</label>
+                                    <InputText
+                                        id="username"
+                                        name="username"
+                                        placeholder="username"
+                                        onChange={formik.handleChange}
+                                        value={formik.values.username}
+                                    />
+                                    {isFormFieldValid(formik, "username") && <Message
+                                        className="text-red-500 text-sm"
+                                        severity="error"
+                                        text={formik?.errors?.username?.toString()}
+                                    />}
+                                </div>
+                            </div>
+                            <div className="col-6">
+                                <div className="flex flex-column gap-2">
+                                    <label htmlFor="email" className="solid-auth-input-label">Last Name</label>
+                                    <InputText
+                                        id="email"
+                                        name="email"
+                                        placeholder="Yourgmail@123.com"
+                                        onChange={formik.handleChange}
+                                        value={formik.values.email}
+                                    />
+                                    {isFormFieldValid(formik, "email") && <Message
+                                        className="text-red-500 text-sm"
+                                        severity="error"
+                                        text={formik?.errors?.email?.toString()}
+                                    />}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex flex-column gap-2 mt-3">
+                            <label htmlFor="email" className="solid-auth-input-label">Email</label>
+                            <InputText
+                                id="email"
+                                name="email"
+                                placeholder="Yourgmail@123.com"
+                                onChange={formik.handleChange}
+                                value={formik.values.email}
+                            />
+                            {isFormFieldValid(formik, "email") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.email?.toString()}
+                            />}
+                        </div>
+                        <div className="flex flex-column gap-2 mt-3">
+                            <label htmlFor="password" className="solid-auth-input-label">Password</label>
+                            <Password
+                                id="password"
+                                name="password"
+                                value={formik.values.password}
+                                onChange={formik.handleChange}
+                                placeholder="***************"
+                                toggleMask
+                                className={classNames("", {
+                                    "p-invalid": isFormFieldValid(formik, "password"),
+                                })}
+                                inputClassName="w-full"
+                                feedback={false}
+                            />
+                            {isFormFieldValid(formik, "password") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.password?.toString()}
+                            />}
+                        </div>
+                        <div className="mt-4">
+                            <Button className="w-full font-light" label="Sign Up" />
+                        </div>
+                    </form>
+                </>
+            </div>
+            <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    Already have an account ? <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default SolidRegister;

package/src/components/auth/SolidResetPassword.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { Message } from "primereact/message";
+import { Password } from "primereact/password";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { useContext, useRef, useState } from "react";
+import * as Yup from "yup";
+import { LayoutContext } from "../layout/context/layoutcontext";
+
+
+const SolidResetPassword = () => {
+    const { layoutConfig } = useContext(LayoutContext);
+    const { authLayout } = layoutConfig;
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState<boolean>(false);
+
+    const validationSchema = Yup.object({
+        email: Yup.string()
+            .email("Invalid email address")
+            .required("Email is required"),
+        password: Yup.string().required("Password is required"),
+    });
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`}>
+                <div className="flex justify-content-center">
+                    <div className="solid-logo flex align-items-center gap-3">
+                        <img
+                            alt="solid logo"
+                            src={'/images/SS-Logo-1 1.png'}
+                            className="position-relative img-fluid"
+                        />
+                        <div>
+                            <p className="solid-logo-title">
+                                Solid<br />Starters
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <h2 className="solid-auth-title text-center">Create New Password</h2>
+                <p className="solid-auth-subtitle text-sm">By continuing, you agree to the <Link href={'#'}>Terms of Service</Link> and acknowledge you’ve read our  <Link href={'#'}>Privacy Policy.</Link> </p>
+                <>
+                    <Formik
+                        initialValues={{
+                            email: "",
+                            password: "",
+                        }}
+                        validationSchema={validationSchema}
+                        onSubmit={async (values) => {
+                            // Handle form submission
+                            const email = values.email;
+                            const password = values.password;
+
+                            const response = await signIn("credentials", {
+                                redirect: false,
+                                email,
+                                password,
+                            });
+                            if (response?.error) {
+                                showToast("error", "Login Error", response.error);
+                            } else {
+                                showToast("success", "Login Success", "Redirecting to dashboard...");
+                                router.push("/admin/core/solid-core/user/list");
+                            }
+
+                        }}
+                    >
+                        {(formik) => (
+                            <Form>
+                                <div className="flex flex-column gap-2">
+                                    <label htmlFor="email" className="solid-auth-input-label">New Password</label>
+                                    <Password
+                                        id="password"
+                                        placeholder="***************"
+                                        value={password}
+                                        onChange={(e) => {
+                                            setPassword(e.target.value);
+                                            formik.setFieldValue("password", e.target.value);
+                                        }}
+                                        toggleMask
+                                        className={classNames("", {
+                                            "p-invalid": isFormFieldValid(formik, "password"),
+                                        })}
+                                        inputClassName="w-full"
+                                        feedback={false}
+                                    />
+                                    {isFormFieldValid(formik, "password") && <Message
+                                        className="text-red-500 text-sm"
+                                        severity="error"
+                                        text={formik?.errors?.password?.toString()}
+                                    />}
+                                </div>
+                                <div className="flex flex-column gap-2 mt-4" style={{}}>
+                                    <label htmlFor="password" className="solid-auth-input-label">Confirm Password</label>
+                                    <Password
+                                        id="password"
+                                        placeholder="***************"
+                                        value={password}
+                                        onChange={(e) => {
+                                            setPassword(e.target.value);
+                                            formik.setFieldValue("password", e.target.value);
+                                        }}
+                                        toggleMask
+                                        className={classNames("", {
+                                            "p-invalid": isFormFieldValid(formik, "password"),
+                                        })}
+                                        inputClassName="w-full"
+                                        feedback={false}
+                                    />
+                                    {isFormFieldValid(formik, "password") && <Message
+                                        className="text-red-500 text-sm"
+                                        severity="error"
+                                        text={formik?.errors?.password?.toString()}
+                                    />}
+                                </div>
+                                {/* <div className="flex align-items-center mt-4">
+                                        <Checkbox inputId="remember" onChange={(e: any) => setChecked(e.checked)} checked={checked} />
+                                        <label htmlFor="remember" className="ml-2">Remember me</label>
+                                    </div> */}
+                                <div className="mt-4">
+                                    <Button className="w-full font-light" label="Reset Password" />
+                                </div>
+                            </Form>
+                        )}
+                    </Formik>
+                </>
+            </div>
+            <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default SolidResetPassword;

package/src/components/core/common/FilterComponent.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 "use client";
+
 import { Calendar } from 'primereact/calendar';
 import { Dropdown } from 'primereact/dropdown';
 import { InputNumber } from 'primereact/inputnumber';
@@ -9,17 +10,17 @@ import React, { useEffect, useState } from 'react';
 import { SolidFilterFields } from '../filter/SolidFilterFields';
 import { Button } from 'primereact/button';
 
-enum FilterRuleType {
+export enum FilterRuleType {
   RULE = 'rule',
   RULE_GROUP = 'rule_group'
 }
 
-enum FilterOperator {
+export enum FilterOperator {
   AND = 'and',
   OR = 'or'
 }
 
-enum FilterMatchMode {
+export enum FilterMatchMode {
   STARTS_WITH = 'startsWith',
   CONTAINS = 'contains',
   EQUALS = 'equals',
@@ -27,18 +28,18 @@ enum FilterMatchMode {
   LESS_THAN = 'lt',
 }
 
-interface FilterRule {
+export interface FilterRule {
   id: number;
   type: FilterRuleType;
   matchOperator?: FilterOperator;
-  fieldName?: string;
-  matchMode?: FilterMatchMode;
+  fieldName?: string | null;
+  matchMode?: FilterMatchMode | null;
   value?: any;
   parentRule: number | null;
   children?: FilterRule[];
 }
 
-interface Field {
+export interface Field {
   name: string;
   type: 'string' | 'number' | 'date';
 }
@@ -220,18 +221,18 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
 
               </button>
 
-                <button onClick={() => onDelete(rule.id)}>
-                  <div className="card flex justify-content-center">
+              <button onClick={() => onDelete(rule.id)}>
+                <div className="card flex justify-content-center">
 
-                    <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
-                      data-pr-tooltip="Delete Rule"
-                      data-pr-position="right"
-                      data-pr-at="right+5 top"
-                      data-pr-my="left center-2"
-                      style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
-                    </i>
-                  </div>
-                </button>
+                  <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="Delete Rule"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                  </i>
+                </div>
+              </button>
 
             </div>
 
@@ -302,28 +303,28 @@ const FilterGroupComponent = ({ viewData, fields, group, onChange, onAddRule, on
 };
 
 // Main Filter component
-const FilterComponent = ({ viewData, fields }) => {
-  const initialState: FilterRule[] = [
-    {
-      id: 1,
-      type: FilterRuleType.RULE_GROUP,
-      matchOperator: FilterOperator.OR,
-      parentRule: null,
-      children: [
-        {
-          id: Date.now() + getRandomInt(1, 500),
-          type: FilterRuleType.RULE,
-          fieldName: null,
-          matchMode: null,
-          value: null,
-          parentRule: 1,
-          children: []
-        }
-      ]
-    }
-  ];
-
-  const [filterRules, setFilterRules] = useState<FilterRule[]>(initialState);
+const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, handleApplyCustomFilter }) => {
+  // const initialState: FilterRule[] = [
+  //   {
+  //     id: 1,
+  //     type: FilterRuleType.RULE_GROUP,
+  //     matchOperator: FilterOperator.OR,
+  //     parentRule: null,
+  //     children: [
+  //       {
+  //         id: Date.now() + getRandomInt(1, 500),
+  //         type: FilterRuleType.RULE,
+  //         fieldName: null,
+  //         matchMode: null,
+  //         value: null,
+  //         parentRule: 1,
+  //         children: []
+  //       }
+  //     ]
+  //   }
+  // ];
+
+  // const [filterRules, setFilterRules] = useState<FilterRule[]>(initialState);
   const [printedState, setPrintedState] = useState<string>('');
 
   const addChild = (rules, parentId, newChild) => {
@@ -421,8 +422,12 @@ const FilterComponent = ({ viewData, fields }) => {
 
   const handlePrintState = () => {
     setPrintedState(JSON.stringify(filterRules, null, 2)); // Pretty format the state
+    handleApplyCustomFilter()
   };
 
+
+
+
   return (
     <div className=''>
       <div className="filter-builder">

package/src/components/core/common/SolidConfigureLayoutElement.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
 import { useState } from "react";
 
@@ -7,23 +8,23 @@ export const SolidConfigureLayoutElement = ({ }: any) => {
 
     const [visible, setVisible] = useState<boolean>(false);
 
-    const [componentsToRender, setComponentsToRender] = useState(["Header", "NonExistentComponent"]);
-
     return (
-        <div className="card flex justify-content-center">
-            <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
-
+        <div className="flex justify-content-center">
+            <Button
+                type="button"
+                size="small"
+                icon="pi pi-cog"
+                onClick={() => setVisible(true)}
+                severity="secondary"
+                outlined
+            />
             <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
-                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </p>
-                <div>
-                   
-                </div>
-
             </Dialog>
         </div>
     )

package/src/components/core/common/SolidCreateButton.tsx

@@ -13,7 +13,7 @@ export const SolidCreateButton = ({ url }: any) => {
     return (
         <div>
             <Link href={createPath}>
-              <Button type="button" icon="pi pi-plus" label="Add" size='small'  className='small-button' ></Button>
+              <Button type="button" icon="pi pi-plus" label="Add" size='small'></Button>
             </Link>
         </div>
     )

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -1,17 +1,18 @@
-'use client';
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Dialog } from "primereact/dialog";
 import { TabPanel, TabView } from "primereact/tabview";
 import { SolidSearchBox } from "./SolidSearchBox";
 import FilterComponent from "@/components/core/common/FilterComponent";
 import { Button } from "primereact/button";
+import { InputText } from "primereact/inputtext";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { Divider } from "primereact/divider";
 
 
-export const SolidGlobalSearchElement = ({ viewData, applyFilter, filterValues, setFilterValues }: any) => {
+export const SolidGlobalSearchElement = ({ viewData, applyFilter, showGlobalSearchElement, setShowGlobalSearchElement,customFilter, setCustomFilter,handleApplyCustomFilter }: any) => {
 
-    const [visible, setVisible] = useState<boolean>(false);
     const handleApplyFilter = (filters: any) => {
-        setVisible(false);
+        setShowGlobalSearchElement(false);
         applyFilter(filters)
     }
 
@@ -26,20 +27,39 @@ export const SolidGlobalSearchElement = ({ viewData, applyFilter, filterValues,
         }
     }, [])
 
+    const op = useRef(null);
 
     return (
-
-
-        <div className="card flex justify-content-center">
-            <i className="pi pi-search" onClick={() => setVisible(true)}></i>
-            <Dialog header={false} className="search-filter-popup" showHeader={false} visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+        <div className="flex justify-content-center solid-custom-filter-wrapper">
+            <div className="p-inputgroup flex-1"
+                onClick={(e) =>
+                    // @ts-ignore
+                    op.current.toggle(e)}
+            >
+                <InputText placeholder="Search Here" className="p-inputtext-sm" />
+                <Button
+                    icon="pi pi-search"
+                    severity="secondary"
+                    outlined size="small"
+                />
+            </div>
+            <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 378 }}>
+            <div className="px-4 py-3">
+                    <p className="m-0">Searching...</p>
+                </div>
+                <Divider className="m-0" />
+                <div className="px-2 py-1">
+                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus'  onClick={() => setShowGlobalSearchElement(true)}/>
+                </div>
+            </OverlayPanel>
+            <Dialog header={false} className="search-filter-popup" showHeader={false} visible={showGlobalSearchElement} style={{ width: '50vw' }} onHide={() => { if (!showGlobalSearchElement) return; setShowGlobalSearchElement(false); }}>
                 <div className="flex field-popup-navigation gap-3 justify-content-between ">
                     <div className="flex text-2xl font-bold align-items-center ml-4" style={{ color: '#000' }}>
-                        <i className="pi pi-search" style={{ marginRight: '5px',color:"#06b6d4" }}></i>
+                        <i className="pi pi-search" style={{ marginRight: '5px', color: "#06b6d4" }}></i>
                         <p className="popup-heading m-0">Search and Filter</p>
                     </div>
                     <div className="flex align-items-center gap-3 close-popup">
-                        <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setVisible(false)} />
+                        <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setShowGlobalSearchElement(false)} />
                     </div>
                 </div>
                 <div className="card relative">
@@ -49,7 +69,7 @@ export const SolidGlobalSearchElement = ({ viewData, applyFilter, filterValues,
                         </TabPanel>
                         <TabPanel header="Filter" >
                             {fields.length > 0 &&
-                                <FilterComponent viewData={viewData} fields={fields}></FilterComponent>
+                                <FilterComponent viewData={viewData} fields={fields} filterRules={customFilter} setFilterRules={setCustomFilter} handleApplyCustomFilter={handleApplyCustomFilter} ></FilterComponent>
                             }
                             {/* <SolidKanbanFilter solidKanbanViewMetaData={solidKanbanViewMetaData} handleApplyFilter={handleApplyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidKanbanFilter> */}
                         </TabPanel>