@solidstarters/solid-core-ui 1.1.3 → 1.1.4

package/src/components/auth/SolidResetPassword.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Form, Formik } from "formik";
-import { signIn } from "next-auth/react";
+import { useConfirmForgotPasswordMutation } from "@/redux/api/authApi";
+import { useFormik } from "formik";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Button } from "primereact/button";
@@ -9,27 +9,18 @@ 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 { useContext, useRef } from "react";
 import * as Yup from "yup";
 import { LayoutContext } from "../layout/context/layoutcontext";
 
 
-const SolidResetPassword = () => {
+const SolidResetPassword = ({ verificationToken, username }: { verificationToken?: any, username?: any }) => {
     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 [confirmForgotPassword] = useConfirmForgotPasswordMutation();
     const showToast = (severity: "success" | "error", summary: string, detail: string) => {
         toast.current?.show({
             severity,
@@ -39,6 +30,41 @@ const SolidResetPassword = () => {
         });
     };
 
+    const validationSchema = Yup.object({
+        password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
+        confirmPassword: Yup.string().oneOf([Yup.ref('password')], 'Passwords must match').required('Confirm password is required'),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            username: username,
+            password: "",
+            confirmPassword: "",
+            verificationToken: verificationToken,
+        },
+        validationSchema,
+        onSubmit: async (values) => {
+            try {
+                const payload = {
+                    username: values.username,
+                    password: values.password,
+                    verificationToken: values.verificationToken,
+                };
+                console.log("Paylod", payload);
+                const response = await confirmForgotPassword(payload).unwrap();
+                if (response?.statusCode === 200) {
+                    showToast("success", "Login Successfull", "Password Updated Successfully")
+                    router.push('/auth/login');
+                } else (
+                    showToast("error", "Login Error", response.error)
+                )
+            } catch (err: any) {
+                console.log("Error", err);
+                showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+            }
+        },
+    });
+
     const isFormFieldValid = (formik: any, fieldName: string) =>
         formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -46,107 +72,77 @@ const SolidResetPassword = () => {
         <>
             <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>
+                {authLayout === 'Center' &&
+                    <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>
-                </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">
+                }
+                <h2 className={`solid-auth-title ${authLayout === 'Center' ? 'text-center' : 'text-left'}`}>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> */}
+                <form onSubmit={formik.handleSubmit}>
+                    <div className="flex flex-column gap-2">
+                        <label htmlFor="password" className="solid-auth-input-label">New Password</label>
+                        <Password
+                            id="password"
+                            name="password"
+                            placeholder="***************"
+                            value={formik.values.password}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            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="confirmPassword"
+                            name="confirmPassword"
+                            placeholder="***************"
+                            value={formik.values.confirmPassword}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            toggleMask
+                            className={classNames("", {
+                                "p-invalid": isFormFieldValid(formik, "confirmPassword"),
+                            })}
+                            inputClassName="w-full"
+                            feedback={false}
+                        />
+                        {isFormFieldValid(formik, "confirmPassword") && <Message
+                            className="text-red-500 text-sm"
+                            severity="error"
+                            text={formik?.errors?.confirmPassword?.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 className="mt-4">
+                        <Button className="w-full font-light auth-submit-button" label="Reset Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                    </div>
+                </form>
             </div>
             <div className="text-center mt-5">
                 <div className="text-sm text-400 secondary-dark-color">

package/src/components/common/SocialMediaLogin.tsx

@@ -1,5 +1,6 @@
-'use client';
+import { signIn } from 'next-auth/react'
 import { Button } from 'primereact/button'
+import React from 'react'
 
 export const SocialMediaLogin = () => {
     return (
@@ -21,11 +22,14 @@ export const SocialMediaLogin = () => {
                     </defs>
                 </svg>
             )}
+                className='flex gap-3'
                 outlined
                 severity="secondary"
+                label='Sign In with Google'
+                onClick={()=>signIn('google', {callbackUrl :'http://localhost:3001/admin/core/solid-core/user/list'})}
             >
             </Button>
-            <Button icon={() => (
+            {/* <Button icon={() => (
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink">
                     <rect width="24" height="24" fill="url(#pattern0_3520_3835)" />
                     <defs>
@@ -39,7 +43,7 @@ export const SocialMediaLogin = () => {
                 outlined
                 severity="secondary"
             >
-            </Button>
+            </Button> */}
         </div>
     )
 }

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

@@ -1,31 +1,102 @@
-'use client';
+"use client"
 import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { useState } from "react";
-
+import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
+import { Divider } from "primereact/divider";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef, useState } from "react";
 
+interface FilterColumns {
+    name: string;
+    key: string;
+}
 export const SolidConfigureLayoutElement = ({ }: any) => {
 
-    const [visible, setVisible] = useState<boolean>(false);
+    // const [visible, setVisible] = useState<boolean>(false);
+    const op = useRef(null);
+    const customizeLayout = useRef(null);
+
+    const categories: FilterColumns[] = [
+        { name: 'ID', key: 'A' },
+        { name: 'Tracker Date', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+    const [selectedCategories, setSelectedCategories] = useState<FilterColumns[]>([categories[1]]);
+
+    const onCategoryChange = (e: CheckboxChangeEvent) => {
+        let _selectedCategories = [...selectedCategories];
+
+        if (e.checked)
+            _selectedCategories.push(e.value);
+        else
+            _selectedCategories = _selectedCategories.filter(category => category.key !== e.value.key);
+
+        setSelectedCategories(_selectedCategories);
+    };
 
     return (
-        <div className="flex justify-content-center">
+        <div className="position-relative">
             <Button
                 type="button"
                 size="small"
                 icon="pi pi-cog"
-                onClick={() => setVisible(true)}
                 severity="secondary"
                 outlined
+                // @ts-ignore
+                onClick={(e) => op.current.toggle(e)}
             />
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
-                <p className="m-0">
-                    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>
-            </Dialog>
+            <OverlayPanel ref={op}>
+                <div className="p-2">
+                    <div className="flex flex-column">
+                        <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2" />
+                        <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2" />
+                        <Button text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" />
+                    </div>
+                </div>
+                <Divider className="m-0" />
+                <div className="p-2 position-relative">
+                    <Button
+                        icon='pi pi-sliders-h'
+                        label="Customize Layout"
+                        size="small"
+                        className="text-left gap-2 w-13rem"
+                        // @ts-ignore
+                        onClick={(e) => customizeLayout.current.toggle(e)}
+                    // onMouseEnter={(e) => customizeLayout.current.show(e)}
+                    />
+                    <p className="mt-3 mb-1 font-medium" style={{ color: 'var(--gray-400)' }}>Saved Layouts</p>
+                    <Button text severity="secondary" label="Diet Tracking" icon="pi pi-plus" size="small"/>
+                    <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}>
+                        <div className="pl-3 pt-2 flex align-items-center justify-content-between">
+                            <p className="m-0 font-bold">Columns</p>
+                            <Button text label="Save Layout" icon="pi pi-plus" />
+                        </div>
+                        <div className="flex flex-column gap-3 p-3">
+                            {categories.map((category) => {
+                                return (
+                                    <div key={category.key} className="flex align-items-center gap-1">
+                                        <Checkbox
+                                            inputId={category.key}
+                                            name="category"
+                                            value={category}
+                                            onChange={onCategoryChange}
+                                            checked={selectedCategories.some((item) => item.key === category.key)}
+                                        />
+                                        <label htmlFor={category.key} className="ml-2">
+                                            {category.name}
+                                        </label>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                        <Divider className="m-0" />
+                        <div className="p-3 flex gap-2">
+                            <Button label="Apply" size="small" />
+                            <Button outlined label="Cancel" size="small" />
+                        </div>
+                    </OverlayPanel>
+                </div>
+            </OverlayPanel>
         </div>
     )
 

package/src/components/core/list/SolidListView.tsx

@@ -27,6 +27,7 @@ import { useRouter } from "next/navigation";
 import { ListViewRowActionPopup } from "./ListViewRowActionPopup";
 import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "@/components/core/common/FilterComponent";
 import { SolidLayoutViews } from '../common/SolidLayoutViews'
+import { SolidConfigureLayoutElement } from '../common/SolidConfigureLayoutElement'
 import { FilterIcon } from '../../modelsComponents/filterIcon';
 import { OverlayPanel } from "primereact/overlaypanel";
 const getRandomInt = (min: number, max: number) => {
@@ -403,67 +404,74 @@ export const SolidListView = (params: SolidListViewParams) => {
     solidGlobalSearchElementRef.current.clearFilter()
   };
 
+  const [solidsolidViewDataId, setSolidViewDataId] = useState<number | null>()
   const op = useRef(null)
 
   // clickable link allowing one to open the detail / form view.
   const detailsBodyTemplate = (solidViewData: any) => {
     return (
-      // <div>
-
-      //   <Button
-      //     text
-      //     size="small"
-      //     className="p-0"
-      //     onClick={(e) =>
-      //       // @ts-ignore 
-      //       op.current.toggle(e)}
-      //   >
-      //     <svg xmlns="http://www.w3.org/2000/svg" width="3" height="10" viewBox="0 0 4 16" fill="none">
-      //       <path d="M4 14C4 14.55 3.80417 15.0208 3.4125 15.4125C3.02083 15.8042 2.55 16 2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14C0 13.45 0.195833 12.9792 0.5875 12.5875C0.979167 12.1958 1.45 12 2 12C2.55 12 3.02083 12.1958 3.4125 12.5875C3.80417 12.9792 4 13.45 4 14ZM4 8C4 8.55 3.80417 9.02083 3.4125 9.4125C3.02083 9.80417 2.55 10 2 10C1.45 10 0.979167 9.80417 0.5875 9.4125C0.195833 9.02083 0 8.55 0 8C0 7.45 0.195833 6.97917 0.5875 6.5875C0.979167 6.19583 1.45 6 2 6C2.55 6 3.02083 6.19583 3.4125 6.5875C3.80417 6.97917 4 7.45 4 8ZM4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979166 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979166 4 1.45 4 2Z" fill="#666666" />
-      //     </svg>
-      //   </Button>
-      //   <OverlayPanel ref={op} className="solid-custom-overlay" style={{ top: 10 }}>
-      //     <div className="flex flex-column gap-1 p-1">
-      //       <Button
-      //         className="w-8rem"
-      //         label="Edit"
-      //         size="small"
-      //         iconPos="left"
-      //         icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-      //           <path d="M3.33333 12.6667H4.28333L10.8 6.15L9.85 5.2L3.33333 11.7167V12.6667ZM2 14V11.1667L10.8 2.38333C10.9333 2.26111 11.0806 2.16667 11.2417 2.1C11.4028 2.03333 11.5722 2 11.75 2C11.9278 2 12.1 2.03333 12.2667 2.1C12.4333 2.16667 12.5778 2.26667 12.7 2.4L13.6167 3.33333C13.75 3.45556 13.8472 3.6 13.9083 3.76667C13.9694 3.93333 14 4.1 14 4.26667C14 4.44444 13.9694 4.61389 13.9083 4.775C13.8472 4.93611 13.75 5.08333 13.6167 5.21667L4.83333 14H2ZM10.3167 5.68333L9.85 5.2L10.8 6.15L10.3167 5.68333Z" fill="#F9F0FF" />
-      //         </svg>}
-      //         onClick={() => {
-      //           if (params.embeded == true) {
-      //             params.handlePopUpOpen(solidViewData.id);
-      //           } else {
-      //             router.push(`${editButtonUrl}/${solidViewData.id}`)
-      //           }
-      //         }}
-      //       />
-      //       <Button
-      //         text
-      //         className="w-8rem"
-      //         label="Delete"
-      //         size="small"
-      //         iconPos="left"
-      //         severity="secondary"
-      //         icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-      //           <path d="M4.66666 14C4.29999 14 3.9861 13.8694 3.72499 13.6083C3.46388 13.3472 3.33332 13.0333 3.33332 12.6667V4H2.66666V2.66667H5.99999V2H9.99999V2.66667H13.3333V4H12.6667V12.6667C12.6667 13.0333 12.5361 13.3472 12.275 13.6083C12.0139 13.8694 11.7 14 11.3333 14H4.66666ZM11.3333 4H4.66666V12.6667H11.3333V4ZM5.99999 11.3333H7.33332V5.33333H5.99999V11.3333ZM8.66666 11.3333H9.99999V5.33333H8.66666V11.3333Z" fill="#4B4D52" />
-      //         </svg>}
-      //         onClick={() => deleteSolidSingleEntiry(solidViewData.id)}
-      //       />
-      //     </div>
-      //   </OverlayPanel>
-      // </div>
-      <a onClick={() => {
-        if (params.embeded == true) {
-          params.handlePopUpOpen(solidViewData.id);
-        } else {
-          router.push(`${editButtonUrl}/${solidViewData.id}`)
-        }
-      }} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: "#12415D" }}>
-        <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
-      </a>
+      <div>
+        <Button
+          text
+          size="small"
+          className=""
+          onClick={(e) =>
+          // @ts-ignore 
+          {
+            op.current.toggle(e);
+            setSolidViewDataId(solidViewData.id)
+          }
+          }
+
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="3" height="10" viewBox="0 0 4 16" fill="none">
+            <path d="M4 14C4 14.55 3.80417 15.0208 3.4125 15.4125C3.02083 15.8042 2.55 16 2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14C0 13.45 0.195833 12.9792 0.5875 12.5875C0.979167 12.1958 1.45 12 2 12C2.55 12 3.02083 12.1958 3.4125 12.5875C3.80417 12.9792 4 13.45 4 14ZM4 8C4 8.55 3.80417 9.02083 3.4125 9.4125C3.02083 9.80417 2.55 10 2 10C1.45 10 0.979167 9.80417 0.5875 9.4125C0.195833 9.02083 0 8.55 0 8C0 7.45 0.195833 6.97917 0.5875 6.5875C0.979167 6.19583 1.45 6 2 6C2.55 6 3.02083 6.19583 3.4125 6.5875C3.80417 6.97917 4 7.45 4 8ZM4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979166 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979166 4 1.45 4 2Z" fill="#666666" />
+          </svg>
+        </Button>
+        <OverlayPanel ref={op} className="solid-custom-overlay" style={{ top: 10 }}>
+          <div className="flex flex-column gap-1 p-1">
+            <Button
+              className="w-8rem text-left gap-2"
+              label="Edit"
+              size="small"
+              iconPos="left"
+              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M3.33333 12.6667H4.28333L10.8 6.15L9.85 5.2L3.33333 11.7167V12.6667ZM2 14V11.1667L10.8 2.38333C10.9333 2.26111 11.0806 2.16667 11.2417 2.1C11.4028 2.03333 11.5722 2 11.75 2C11.9278 2 12.1 2.03333 12.2667 2.1C12.4333 2.16667 12.5778 2.26667 12.7 2.4L13.6167 3.33333C13.75 3.45556 13.8472 3.6 13.9083 3.76667C13.9694 3.93333 14 4.1 14 4.26667C14 4.44444 13.9694 4.61389 13.9083 4.775C13.8472 4.93611 13.75 5.08333 13.6167 5.21667L4.83333 14H2ZM10.3167 5.68333L9.85 5.2L10.8 6.15L10.3167 5.68333Z" fill="#F9F0FF" />
+              </svg>}
+              onClick={() => {
+                console.log("solidViewData.id", solidViewData.id);
+
+                if (params.embeded == true) {
+                  params.handlePopUpOpen(solidsolidViewDataId);
+                } else {
+                  router.push(`${editButtonUrl}/${solidsolidViewDataId}`)
+                }
+              }}
+            />
+            <Button
+              text
+              className="w-8rem text-left gap-2"
+              label="Delete"
+              size="small"
+              iconPos="left"
+              severity="secondary"
+              icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M4.66666 14C4.29999 14 3.9861 13.8694 3.72499 13.6083C3.46388 13.3472 3.33332 13.0333 3.33332 12.6667V4H2.66666V2.66667H5.99999V2H9.99999V2.66667H13.3333V4H12.6667V12.6667C12.6667 13.0333 12.5361 13.3472 12.275 13.6083C12.0139 13.8694 11.7 14 11.3333 14H4.66666ZM11.3333 4H4.66666V12.6667H11.3333V4ZM5.99999 11.3333H7.33332V5.33333H5.99999V11.3333ZM8.66666 11.3333H9.99999V5.33333H8.66666V11.3333Z" fill="#4B4D52" />
+              </svg>}
+              onClick={() => deleteSolidSingleEntiry(solidViewData.id)}
+            />
+          </div>
+        </OverlayPanel>
+      </div>
+      // <a onClick={() => {
+      //   if (params.embeded == true) {
+      //     params.handlePopUpOpen(solidViewData.id);
+      //   } else {
+      //     router.push(`${editButtonUrl}/${solidViewData.id}`)
+      //   }
+      // }} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: "#12415D" }}>
+      //   <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
+      // </a>
     );
   };
 
@@ -580,7 +588,9 @@ export const SolidListView = (params: SolidListViewParams) => {
             setView={setView}
             view={view}
           />
-
+          {params.embeded === false &&
+            <SolidConfigureLayoutElement></SolidConfigureLayoutElement>
+          }
           {/* {params.embeded === false &&
             <SolidListViewOptions></SolidListViewOptions>
           } */}
@@ -593,7 +603,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           showGridlines={false}
           lazy
           scrollable
-          scrollHeight="90vh"
+          // scrollHeight="90vh"
           size={size}
           resizableColumns
           paginator={true}
@@ -617,13 +627,15 @@ export const SolidListView = (params: SolidListViewParams) => {
           filterIcon={<FilterIcon />}
           tableClassName="solid-data-table"
           paginatorClassName="solid-paginator"
+          paginatorTemplate="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink"
+          currentPageReportTemplate="{first} - {last} of {totalRecords}"
         >
 
           <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
 
           {renderColumnsDynamically(listViewMetaData)}
           {actionsAllowed.includes(`${updatePermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.edit !== false &&
-            <Column body={detailsBodyTemplate}></Column>
+            <Column body={detailsBodyTemplate} ></Column>
           }
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
             solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {

package/src/components/core/list/columns/SolidBooleanColumn.tsx

@@ -43,7 +43,7 @@ const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: So
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            className="text-sm"
+            // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
             dataType={columnDataType}

package/src/components/core/list/columns/SolidDateColumn.tsx

@@ -46,9 +46,9 @@ const SolidDateColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            className="text-sm"
+            // className="text-sm"
             sortable={column.attrs.sortable}
-            filter={filterable}
+            // filter={filterable}
             dataType={columnDataType}
             showFilterOperator={showFilterOperator}
             filterMatchModeOptions={dateFilterMatchModeOptions}

package/src/components/core/list/columns/SolidDatetimeColumn.tsx

@@ -34,9 +34,9 @@ const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: S
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            className="text-sm"
+            // className="text-sm"
             sortable={column.attrs.sortable}
-            filter={filterable}
+            // filter={filterable}
             dataType={columnDataType}
             showFilterOperator={showFilterOperator}
             filterMatchModeOptions={dateFilterMatchModeOptions}