@visns-studio/visns-components 4.7.2 → 4.7.4

package/src/components/crm/generic/GenericAuth.jsx

@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from 'react';
+import {
+    useNavigate,
+    useLocation,
+    Routes,
+    Route,
+    Navigate,
+    Outlet,
+} from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+import 'react-toastify/dist/ReactToastify.css';
+
+import CustomFetch from '../Fetch';
+import GenericMain from './GenericMain';
+import Login from '../auth/Login';
+import Reset from '../auth/Reset';
+import Verify from '../auth/Verify';
+
+const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
+    const location = useLocation();
+
+    return loading ? null : !user || !user.id ? (
+        <Navigate
+            to={redirectPath}
+            replace
+            state={{ previousUrl: location.pathname }}
+        />
+    ) : (
+        <Outlet />
+    );
+};
+
+const GenericAuth = ({
+    layout = 'full',
+    loginBg,
+    logo,
+    headerLogo,
+    providers,
+    navigation,
+    routeConfig,
+    themeType = 'primary',
+}) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [userProfile, setUserProfile] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+    const updateAuthStatus = async () => {
+        try {
+            const { data } = await CustomFetch('/ajax/user/profile', 'GET');
+            setUserProfile(data);
+            setIsAuthenticated(true);
+            setIsLoading(false);
+
+            if (location.pathname.split('/')[1] === 'login') {
+                navigate('/', { replace: true });
+            }
+        } catch (error) {
+            setIsLoading(false);
+            if (['Unauthenticatdata.'].includes(error)) {
+                const currentUrl = window.location.pathname;
+
+                setIsAuthenticated(false);
+                navigate('/login', { state: { previousUrl: currentUrl } });
+            }
+        }
+    };
+
+    useEffect(() => {
+        updateAuthStatus();
+    }, [isAuthenticated]);
+
+    return (
+        <>
+            <Routes>
+                <Route
+                    path="login"
+                    element={
+                        <LoginComponent
+                            loginBg={loginBg}
+                            logo={logo}
+                            providers={providers}
+                            setIsAuthenticated={setIsAuthenticated}
+                            setUserProfile={setUserProfile}
+                        />
+                    }
+                />
+                <Route
+                    path="reset"
+                    element={
+                        <ResetComponent
+                            loginBg={loginBg}
+                            logo={logo}
+                            setIsAuthenticated={setIsAuthenticated}
+                        />
+                    }
+                />
+                <Route
+                    path="verify/:code"
+                    element={
+                        <VerifyComponent
+                            loginBg={loginBg}
+                            logo={logo}
+                            setIsAuthenticated={setIsAuthenticated}
+                        />
+                    }
+                />
+                <Route
+                    element={
+                        <ProtectedRoute
+                            user={userProfile}
+                            loading={isLoading}
+                        />
+                    }
+                >
+                    <Route
+                        path="/*"
+                        element={
+                            <GenericMain
+                                layout={layout}
+                                logo={headerLogo}
+                                navigation={navigation}
+                                routeConfig={routeConfig}
+                                setUserProfile={setUserProfile}
+                                setSystemAuth={setIsAuthenticated}
+                                themeType={themeType}
+                                userProfile={userProfile}
+                            />
+                        }
+                    />
+                </Route>
+            </Routes>
+            <ToastContainer
+                theme="light"
+                position="bottom-center"
+                style={{ width: '600px' }}
+            />
+            <Tooltip id="system-tooltip" />
+        </>
+    );
+};
+
+const LoginComponent = React.memo(
+    ({ loginBg, logo, providers, setIsAuthenticated, setUserProfile }) => (
+        <Login
+            loginBg={loginBg}
+            logo={logo}
+            providers={providers}
+            setSystemAuth={setIsAuthenticated}
+            setUserProfile={setUserProfile}
+        />
+    )
+);
+
+const ResetComponent = React.memo(({ loginBg, logo, setIsAuthenticated }) => (
+    <Reset loginBg={loginBg} logo={logo} setSystemAuth={setIsAuthenticated} />
+));
+
+const VerifyComponent = React.memo(({ loginBg, logo, setIsAuthenticated }) => (
+    <Verify loginBg={loginBg} logo={logo} setSystemAuth={setIsAuthenticated} />
+));
+
+export default GenericAuth;

package/src/components/crm/generic/GenericDashboard.jsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import CustomFetch from '../../crm/Fetch';
+
+const GenericDashboard = ({ userProfile }) => {
+    const [data, setData] = useState([]);
+
+    return (
+        <div className="grid">
+            <div className="grid__row">
+                <div className="grid__three dashtopwidge">
+                    <div className="dashtopwidge__left">
+                        <h2>
+                            Current
+                            <span>
+                                <strong>Enquiries</strong>
+                            </span>
+                        </h2>
+                    </div>
+                    <div className="dashtopwidge__right">
+                        <span>0</span>
+                    </div>
+                </div>
+                <div className="grid__three dashtopwidge">
+                    <div className="dashtopwidge__left">
+                        <h2>
+                            Current{' '}
+                            <span>
+                                <strong>Enquiries</strong>
+                            </span>
+                        </h2>
+                    </div>
+                    <div className="dashtopwidge__right">
+                        <span>0</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GenericDashboard;