@solidstarters/solid-core-ui 1.0.1 → 1.1.0

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';
+"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';
 }
@@ -87,28 +88,31 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
   // const applicableInputField = rule.fieldName ? fields.find(f => f.name === rule.fieldName)?.type : "";
   const [fieldName, setFieldName] = useState({ name: rule.fieldName });
   const [matchMode, setMatchMode] = useState({ name: rule.matchMode });
-  console.log("fields", fields);
+  console.log("level", level);
 
   return (
     // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
-    <div style={{ marginLeft: 5 + 'px' }} className="filter-rule">
+    <div className="filter-rule">
       <div className="filter-individual-rule">
         <div className='filter-individual-rule-form'>
-          <div className="grid align-items-center">
-            <div className="col-10 p-0">
-              <div className="filter-component-fields">
-                <Dropdown
-                  key={rule.id}
-                  value={fieldName.name}
-                  onChange={e => {
-                    setFieldName({ name: e.value, value: e.value })
-                    onChange(rule.id, 'fieldName', e.value)
-                  }}
-                  options={fields}
-                  optionLabel='name'
-                  optionValue='name'
-                  placeholder="Select Field" className="w-full  md:w-14rem" />
-
+          <div className=" flex align-items-center">
+            <div className=" p-0" style={{ flex: "10" }}>
+              {/* <div className="filter-component-fields"> */}
+              <div className='filter-component-fields'>
+                <div className='filter-component-fields-section-one' >
+                  <Dropdown
+                    key={rule.id}
+                    value={fieldName.name}
+                    onChange={e => {
+                      setFieldName({ name: e.value, value: e.value })
+                      onChange(rule.id, 'fieldName', e.value)
+                    }}
+                    options={fields}
+                    optionLabel='name'
+                    optionValue='name'
+                    style={{ marginLeft: (level - 1) * 5 + 'px', width: "100%", maxWidth: "-webkit-fill-available" }}
+                    placeholder="Select Field" className="w-full md:w-14rem" />
+                </div>
                 {/* <Dropdown
                     value={matchMode}
                     onChange={e => {
@@ -119,9 +123,28 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
                     options={applicableOperators}
                     optionLabel='name'
                     placeholder="Select Field" className="w-full filter-small-input md:w-14rem" /> */}
-                {rule.fieldName &&
-                  <SolidFilterFields viewData={viewData} fieldMetadata={viewData.data.solidFieldsMetadata[rule.fieldName]} onChange={onChange} index={rule.id} rule={rule}></SolidFilterFields>
-                }
+
+                <div className='filter-component-fields-section-two'>
+                  {!rule.fieldName &&
+                    <>
+                      <InputText
+                        disabled
+                        value={rule.value || ''}
+                        placeholder="operator"
+                        className='filter-small-input'
+                      />
+                      <InputText
+                        disabled
+                        value={rule.value || ''}
+                        placeholder="value"
+                        className='filter-small-input'
+                      />
+                    </>
+                  }
+                  {rule.fieldName &&
+                    <SolidFilterFields viewData={viewData} fieldMetadata={viewData.data.solidFieldsMetadata[rule.fieldName]} onChange={onChange} index={rule.id} rule={rule}></SolidFilterFields>
+                  }
+                </div>
 
 
                 {/* <div className="col-4">
@@ -152,7 +175,7 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
 
               </div>
             </div>
-            <div className="col-2 flex justify-content-end">
+            <div className="col-2 flex justify-content-end" style={{ flex: "2" }}>
               <button onClick={() => onAddRule(rule.parentRule)}>
                 <div className="card flex justify-content-center">
                   {/* <Tooltip target=".custom-target-icon" /> */}
@@ -237,11 +260,13 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
 // Component to render a group of filter rules
 const FilterGroupComponent = ({ viewData, fields, group, onChange, onAddRule, onAddGroup, onDelete, level }) => {
   return (
-    <div style={{ marginLeft: 5 + 'px' }} className="filter-group">
+    <div className="filter-group">
       {/* <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-group"> */}
 
       <div className='flex justify-content-between align-items-center'>
-        <p className='m-0 mb-2 filter-text'> Match
+        <p className='mb-1 mt-1 filter-text'
+          style={{ marginLeft: (level - 1) * 5 + 'px' }}
+        > Match
           <select className='filter-select'
             value={group.matchOperator}
             onChange={e => onChange(group.id, 'matchOperator', e.target.value)}
@@ -255,7 +280,7 @@ const FilterGroupComponent = ({ viewData, fields, group, onChange, onAddRule, on
         {/* <button onClick={() => onAddGroup(group.id)}>Add Group to Group</button> */}
 
         {/* Add Delete Button for non-root groups */}
-        {level > 0 && <button onClick={() => onDelete(group.id)}>
+        {level > 0 && <button style={{ marginRight: "8px" }} onClick={() => onDelete(group.id)}>
           <div className="card flex justify-content-center">
             <Tooltip target=".custom-target-icon" />
 
@@ -278,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) => {
@@ -397,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">
@@ -419,10 +448,11 @@ const FilterComponent = ({ viewData, fields }) => {
 
       </div>
 
-      <div>
-        <button onClick={handlePrintState}>Print State</button>
+      <div className='text-center'>
+        <Button label="Apply" size="small" onClick={handlePrintState} type="submit" className="small-button" />
+
         <br></br>
-        <textarea value={printedState} readOnly rows={20} cols={80} style={{ marginTop: '20px' }} />
+        <textarea value={printedState} readOnly rows={20} cols={100} style={{ marginTop: '20px' }} />
       </div>
     </div>
   );

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

@@ -1,30 +1,30 @@
 'use client';
-import { useState } from "react";
+import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
-import dynamic from "next/dynamic";
+import { useState } from "react";
 
 
 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>
     )