@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/users/UserListView.tsx

@@ -0,0 +1,376 @@
+"use client";
+import { useDeleteMultipleUsersMutation, useLazyGetusersQuery } from '../../../redux/api/userApi';
+import Link from "next/link";
+import { FilterMatchMode } from "primereact/api";
+import { Button } from "primereact/button";
+import { Column } from "primereact/column";
+import {
+    DataTable,
+    DataTableFilterMeta,
+    DataTableStateEvent,
+} from "primereact/datatable";
+import { useEffect, useRef, useState } from "react";
+
+import { CreateButton } from "../../../components/common/CreateButton";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { Dialog } from "primereact/dialog";
+import { Toast } from "primereact/toast";
+import qs from "qs";
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+
+interface Users {
+    id: string;
+    fullName: string;
+    username: string;
+    email: string;
+    mobile: string;
+    // roles: string[];
+}
+
+interface ErrorResponseData {
+    message: string;
+    statusCode: number;
+    error: string;
+}
+
+export const UserListView = () => {
+    const toast = useRef<Toast>(null);
+    const [users, setUsers] = useState<Users[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>({
+        fullName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        username: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        email: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        mobile: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        // "roles.name": { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    });
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(25);
+    const [totalRecords, setTotalRecords] = useState(0);
+    const [sortField, setSortField] = useState("");
+    const [sortOrder, setSortOrder] = useState(0);
+    const [selectedUsers, setSelectedUsers] = useState<Users[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [isDialogVisible, setDialogVisible] = useState(false);
+    const [triggerGetUser, { data: user, isLoading, error, isError }] = useLazyGetusersQuery();
+
+    const [
+        deleteManyUser,
+        {
+            isLoading: isUserDeleted,
+            isSuccess: isDeleteUserSuceess,
+            isError: isUserDeleteError,
+            error: UserDeleteError,
+            data: DeletedUser,
+        },
+    ] = useDeleteMultipleUsersMutation();
+
+
+    useEffect(() => {
+        if (user) {
+            setUsers(user?.data.records);
+            setTotalRecords(user?.data.meta?.totalRecords);
+            setLoading(false);
+        }
+    }, [user]);
+
+    // const initFilters = () => {
+    //     setFilters(defaultFilters);
+    //     setGlobalFilterValue('');
+    // };
+
+    // const clearFilter = () => {
+    //     initFilters();
+    // };
+
+    useEffect(() => {
+        const queryData = {
+            offset: 0,
+            limit: 25,
+            populate: ['roles']
+        };
+        const queryString = qs.stringify(queryData, {
+            encodeValuesOnly: true
+        });
+        triggerGetUser(queryString);
+        setSelectedUsers([]);
+    }, [isDeleteUserSuceess]);
+
+    useEffect(() => {
+        if (isError || isUserDeleteError) {
+            setLoading(false);
+            let errorMessage = ERROR_MESSAGES.ERROR_OCCURED;
+
+            const errorToast = isError ? error : UserDeleteError;
+
+            if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+                errorMessage = `${errorToast.data.message}`;
+            } else {
+                errorMessage = ERROR_MESSAGES.SOMETHING_WRONG;
+            }
+
+            toast.current?.show({
+                severity: 'error',
+                summary: ERROR_MESSAGES.ERROR,
+                detail: errorMessage,
+                life: 3000,
+                //@ts-ignore
+                content: (props) => (
+                    <div
+                        className="flex flex-column align-items-left"
+                        style={{ flex: "1" }}
+                    >
+                        <div className="flex align-items-center gap-2" >
+                            <span className="font-bold text-900">{errorMessage}</span>
+                        </div>
+                    </div>
+                ),
+            });
+        }
+    }, [isError, isUserDeleteError]);
+
+    function isFetchBaseQueryErrorWithErrorResponse(error: any): error is FetchBaseQueryError & { data: ErrorResponseData } {
+        return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
+    }
+
+    const onPageChange = (event: any) => {
+        setFirst(event.first);
+        setRows(event.rows);
+        setQueryString(event.first, event.rows, sortField, sortOrder, filters);
+    };
+
+    const onSort = (event: DataTableStateEvent) => {
+        const { sortField, sortOrder } = event;
+        const validSortOrder = sortOrder === 1 || sortOrder === -1 ? sortOrder : 0;
+        setSortField(sortField);
+        setSortOrder(validSortOrder);
+        setFirst(0);
+        setQueryString(
+            0,
+            rows,
+            sortField,
+            sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
+            filters
+        );
+    };
+
+    const onSelectionChange = (event: any) => {
+        const value = event.value;
+        setSelectedUsers(value);
+    };
+
+    // Filter fuctions
+    const setQueryString = async (
+        offset?: number,
+        row?: number,
+        field?: string,
+        order?: number,
+        filterQuery?: any
+    ) => {
+
+        const formattedFilters: any = {};
+
+        Object.keys(filterQuery).forEach((field) => {
+            const filterValue = filterQuery[field].value;
+            const matchMode = filterQuery[field].matchMode;
+
+            if (filterValue !== null && filterValue !== undefined) {
+                let operator = matchMode;
+                switch (matchMode) {
+                    case FilterMatchMode.CONTAINS:
+                        operator = "$containsi";
+                        break;
+                    case FilterMatchMode.STARTS_WITH:
+                        operator = "$startsWithi";
+                        break;
+                    case FilterMatchMode.EQUALS:
+                        operator = "$eqi";
+                        break;
+                    case FilterMatchMode.NOT_CONTAINS:
+                        operator = "$notContainsi";
+                        break;
+                    case FilterMatchMode.NOT_EQUALS:
+                        operator = "$nei";
+                        break;
+                    case FilterMatchMode.ENDS_WITH:
+                        operator = "$endsWithi";
+                        break;
+                    default:
+                        operator = matchMode;
+                }
+
+                if (field.includes(".")) {
+                    const fieldParts = field.split(".");
+                    if (!formattedFilters[fieldParts[0]]) {
+                        formattedFilters[fieldParts[0]] = {};
+                    }
+                    formattedFilters[fieldParts[0]][fieldParts[1]] = { [operator]: filterValue };
+                } else {
+                    formattedFilters[field] = { [operator]: filterValue };
+                }
+            }
+        });
+
+        const queryData: any = {
+            offset: offset ?? first,
+            limit: row ?? rows,
+            populate: ['roles'],
+            filters: formattedFilters,
+        };
+
+        if (field) {
+            queryData.sort = [
+                `${field}:${order == 0 ? null : order == 1 ? "asc" : "desc"}`,
+            ];
+        }
+
+        const queryString = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        triggerGetUser(queryString);
+    };
+
+    const onFilter = (e: any) => {
+        setFilters(e.filters);
+        setQueryString(
+            0,
+            rows,
+            sortField,
+            sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
+            e.filters
+        );
+    };
+
+    const detailsBodyTemplate = (product: Users) => {
+        return (
+            <Link
+                href={`${product.id}`}
+                rel="noopener noreferrer"
+                className="text-sm font-bold p-0"
+                style={{ color: "#12415D" }}
+            >
+                <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
+            </Link>
+        );
+    };
+
+    const deleteBulk = () => {
+        let deleteList: any = [];
+        selectedUsers.forEach((element: Users) => {
+            deleteList.push(element.id);
+        });
+        deleteManyUser(deleteList);
+        setDialogVisible(false);
+    };
+
+    const onDeleteClose = () => {
+        setDialogVisible(false);
+        setSelectedUsers([]);
+    }
+
+    return (
+        <div className="">
+            <Toast ref={toast} />
+            <div className="flex gap-3 mb-4">
+                <CreateButton />
+                {selectedUsers.length > 0 && <Button
+                    type="button"
+                    label="Delete"
+                    size="small"
+                    onClick={() => setDialogVisible(true)}
+                    className="small-button"
+                    severity="danger"
+                />}
+            </div>
+            <style>{`
+        .p-datatable .p-datatable-loading-overlay {
+        background-color: rgba(0, 0, 0, 0.0);
+        }
+        `}</style>
+            <DataTable
+                value={users}
+                lazy
+                tableStyle={{ minWidth: "60rem", margin: "auto" }}
+                size="small"
+                paginator
+                rows={rows}
+                rowsPerPageOptions={[10, 25, 50]}
+                dataKey="id"
+                filters={filters}
+                emptyMessage="No users found."
+                onFilter={onFilter}
+                filterDisplay="row"
+                totalRecords={totalRecords}
+                first={first}
+                onPage={onPageChange}
+                onSort={(e: DataTableStateEvent) => onSort(e)}
+                sortField={sortField}
+                sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
+                loading={loading || isLoading}
+                loadingIcon="pi pi-spinner"
+                selection={selectedUsers}
+                onSelectionChange={onSelectionChange}
+                selectionMode="multiple"
+                removableSort
+            >
+                <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
+                <Column field="id" header="ID" className="text-sm" sortable headerClassName="table-header-fs"></Column>
+                <Column
+                    field="fullName"
+                    header="Full Name"
+                    className="text-sm"
+                    sortable
+                    filter
+                    filterPlaceholder="Search user by full name"
+                    style={{ minWidth: "12rem" }}
+                    headerClassName="table-header-fs"
+                ></Column>
+                <Column
+                    field="username"
+                    header="Username"
+                    className="text-sm"
+                    sortable
+                    filter
+                    filterPlaceholder="Search user by username"
+                    style={{ minWidth: "12rem" }}
+                    headerClassName="table-header-fs"
+                ></Column>
+                <Column
+                    field="email"
+                    header="Email"
+                    className="text-sm"
+                    sortable
+                    filter
+                    filterPlaceholder="Search user by email"
+                    style={{ minWidth: "12rem" }}
+                    headerClassName="table-header-fs"
+                ></Column>
+                {/* <Column
+                    field="roles.name"
+                    header="Roles"
+                    className="text-sm"
+                    filter
+                    filterPlaceholder="Search category by parent category"
+                    style={{ minWidth: "12rem" }}
+                    headerClassName="table-header-fs"
+                ></Column> */}
+                <Column body={detailsBodyTemplate}></Column>
+            </DataTable>
+            <Dialog
+                visible={isDialogVisible}
+                header="Confirm Delete"
+                modal
+                className="solid-confirm-dialog"
+                footer={() => (
+                    <div className="flex justify-content-center">
+                        <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteBulk} />
+                        <Button label="No" icon="pi pi-times" className='small-button' onClick={onDeleteClose} />
+                    </div>
+                )}
+                onHide={() => setDialogVisible(false)}
+            >
+                <p>Are you sure you want to delete the selected Users?</p>
+            </Dialog>
+        </div>
+    );
+};

package/dist/components/layout/AdminLayout.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { handleError } from "../../helpers/ToastContainer";
+import { signOut, useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Layout } from "./Layout";
+import { Dialog } from "primereact/dialog";
+import { Divider } from "primereact/divider";
+import SolidChangeForcePassword from "../auth/SolidChangeForcePassword";
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+
+export const AdminLayout = ({ children }: { children: React.ReactNode }) => {
+    // const theme = useSelector((state: any) => state.theme.mode);
+    const { data: session, status } = useSession();
+    const [isForcePasswordChange, setIsForcePasswordChange] = useState(false)
+    useEffect(() => {
+        // @ts-expect-error: Handling potential case where 'data?.user?.user' might be undefined or null
+        if (session?.user?.user?.forcePasswordChange === true) {
+            setIsForcePasswordChange(true)
+        } else {
+            setIsForcePasswordChange(false)
+        }
+    }, [session])
+    // const pathname = usePathname();
+    const router = useRouter();
+    useEffect(() => {
+        if (status === "loading") return;
+        if (!session || session?.error === "RefreshAccessTokenError") {
+            handleError([ERROR_MESSAGES.SESSION_EXPIRED])
+            signOut({ callbackUrl: "/auth/login" });
+        }
+
+    }, [session, status])
+
+    return (
+        <Layout>
+            {/* <div className={`${process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" && 'header-margin-top'}`} style={{ minHeight: `${process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" ? 'calc(100vh - 70px)' : 'calc(100vh)'}` }}> */}
+
+            {/* <div className="min-h-full max-h-full flex flex-column relative flex-auto overflow-x-auto"> */}
+            {/* <DashboardHeader /> */}
+            {/* <SolidListingHeader></SolidListingHeader> */}
+            {/* {pathname.includes('all') && <ListingHeader />} */}
+            {/* <div className="flex flex-column flex-auto" style={{ backgroundColor: '#f6f6f9', padding: '1.5rem 1.5rem 1.5rem', }}> */}
+            {children}
+            {/* </div> */}
+            {/* </div> */}
+            {/* </div> */}
+            {isForcePasswordChange &&
+                <Dialog header="Change Default Password" className="solid-change-dialog" visible={isForcePasswordChange} closable={false} draggable={false} style={{ width: '25vw' }} onHide={() => setIsForcePasswordChange(false)}>
+                    <Divider className="mt-0" />
+                    <SolidChangeForcePassword />
+                </Dialog>
+            }
+        </Layout>
+    )
+}

package/dist/components/layout/AdminSidebar.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+const AdminSidebar = () => {
+  const pathname = usePathname();
+
+  const menuItem = [
+    {
+      name: "Dashboard",
+      url: "/admin/dashboard",
+      icon: "fas fa-tachometer-alt",
+    },
+    {
+      name: "Rooms",
+      url: "/admin/rooms",
+      icon: "fas fa-hotel",
+    },
+    {
+      name: "Bookings",
+      url: "/admin/bookings",
+      icon: "fas fa-receipt",
+    },
+    {
+      name: "Users",
+      url: "/admin/users",
+      icon: "fas fa-user",
+    },
+    {
+      name: "Reviews",
+      url: "/admin/reviews",
+      icon: "fas fa-star",
+    },
+  ];
+
+  const [activeMenuItem, setActiveMenuItem] = useState(pathname);
+
+  const handleMenuItemClick = (menuItem: string) => {
+    setActiveMenuItem(menuItem);
+  };
+
+  return (
+    <div className="list-group mt-5 pl-4">
+      {menuItem.map((menuItem, index) => (
+        <Link
+          key={index}
+          href={menuItem.url}
+          className={`fw-bold list-group-item list-group-item-action ${
+            activeMenuItem.includes(menuItem.url) ? "active" : ""
+          }`}
+          onClick={() => handleMenuItemClick(menuItem.url)}
+          aria-current={
+            activeMenuItem.includes(menuItem.url) ? "true" : "false"
+          }
+        >
+          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default AdminSidebar;

package/dist/components/layout/AppConfig.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { AppConfigProps, LayoutConfig, LayoutState } from '../../types';
+import { PrimeReactContext } from 'primereact/api';
+import { Button } from 'primereact/button';
+import { RadioButton, RadioButtonChangeEvent } from 'primereact/radiobutton';
+import { Sidebar } from 'primereact/sidebar';
+import { classNames } from 'primereact/utils';
+import { useContext, useEffect, useState } from 'react';
+import { LayoutContext } from './context/layoutcontext';
+
+const AppConfig = (props: AppConfigProps) => {
+    const [scales] = useState([12, 13, 14, 15, 16]);
+    const { layoutConfig, setLayoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
+    const { changeTheme } = useContext(PrimeReactContext);
+
+    const onConfigButtonClick = () => {
+        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: true }));
+    };
+
+    const onConfigSidebarHide = () => {
+        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: false }));
+    };
+
+    const changeInputStyle = (e: RadioButtonChangeEvent) => {
+        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, inputStyle: e.value }));
+    };
+
+    const _changeTheme = (theme: string, colorScheme: string) => {
+        changeTheme?.(layoutConfig.theme, theme, 'theme-css', () => {
+            setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, theme, colorScheme }));
+        });
+    };
+
+    const decrementScale = () => {
+        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale - 1 }));
+    };
+
+    const incrementScale = () => {
+        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale + 1 }));
+    };
+
+    const applyScale = () => {
+        // document.documentElement.style.fontSize = layoutConfig.scale + 'px';
+        document.documentElement.style.fontSize = 15 + 'px';
+    };
+
+    useEffect(() => {
+        applyScale();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layoutConfig.scale]);
+
+    return (
+        <>
+            {/* <button className="layout-config-button config-link" type="button" onClick={onConfigButtonClick}>
+                <i className="pi pi-cog"></i>
+            </button>
+
+            <Sidebar visible={layoutState.configSidebarVisible} onHide={onConfigSidebarHide} position="right" className="layout-config-sidebar w-20rem">
+                {!props.simple && (
+                    <>
+                        <h5>Scale</h5>
+                        <div className="flex align-items-center">
+                            <Button icon="pi pi-minus" type="button" onClick={decrementScale} rounded text className="w-2rem h-2rem mr-2" disabled={layoutConfig.scale === scales[0]}></Button>
+                            <div className="flex gap-2 align-items-center">
+                                {scales.map((item) => {
+                                    return <i className={classNames('pi pi-circle-fill', { 'text-primary-500': item === layoutConfig.scale, 'text-300': item !== layoutConfig.scale })} key={item}></i>;
+                                })}
+                            </div>
+                            <Button icon="pi pi-plus" type="button" onClick={incrementScale} rounded text className="w-2rem h-2rem ml-2" disabled={layoutConfig.scale === scales[scales.length - 1]}></Button>
+                        </div>
+
+                        <h5>Input Style</h5>
+                        <div className="flex">
+                            <div className="field-radiobutton flex-1">
+                                <RadioButton name="inputStyle" value={'outlined'} checked={layoutConfig.inputStyle === 'outlined'} onChange={(e) => changeInputStyle(e)} inputId="outlined_input"></RadioButton>
+                                <label htmlFor="outlined_input">Outlined</label>
+                            </div>
+                            <div className="field-radiobutton flex-1">
+                                <RadioButton name="inputStyle" value={'filled'} checked={layoutConfig.inputStyle === 'filled'} onChange={(e) => changeInputStyle(e)} inputId="filled_input"></RadioButton>
+                                <label htmlFor="filled_input">Filled</label>
+                            </div>
+                        </div>
+                    </>
+                )}
+                <h5>Appearance</h5>
+                <div className="grid">
+                    <div className="col-3">
+                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('solid-light-purple', 'light')}>
+                            <img src="/images/layout/images/themes/lara-light-blue.png" className="w-2rem h-2rem" alt="Lara Light Blue" />
+                        </button>
+                    </div>
+                    <div className="col-3">
+                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('solid-dark-purple', 'dark')}>
+                            <img src="/images/layout/images/themes/lara-dark-blue.png" className="w-2rem h-2rem" alt="Lara Dark Cyan" />
+                        </button>
+                    </div>
+                </div>
+            </Sidebar> */}
+        </>
+    );
+};
+
+export default AppConfig;