@visns-studio/visns-components 4.10.48 → 5.0.1-8.1

package/src/components/crm/auth/styles/Verify.module.scss

@@ -1,11 +1,17 @@
 .formItem {
     width: 50%;
-    padding: 0.5em;
     position: relative;
     box-sizing: border-box;
 
+    h1 {
+        text-align: center;
+        font-size: 1.25rem;
+    }
+
     .fi__label {
         position: relative;
+        display: flex;
+        align-items: center;
     }
 
     .fi__span {
@@ -13,9 +19,9 @@
         transition: all 200ms;
         opacity: 0.8;
         left: 0;
-        padding: 19px 20px;
         transform-origin: top left;
         cursor: text;
+        padding: 0 1rem;
     }
 
     .fi__div {
@@ -23,14 +29,14 @@
         opacity: 0.8;
         left: 0;
         padding: 19px 13px;
-        border-radius: var(--br);
-        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+        border-radius: var(--radius);
+        border: 1px solid rgba(var(--paragraph-rgb), 0.15);
         box-shadow: none;
     }
 
     .fi__toggle {
         width: max-content;
-        padding: 0px 10px 0px 0;
+        padding: 0 10px 0 0;
         box-sizing: border-box;
         display: inline;
     }
@@ -43,8 +49,10 @@
     }
 }
 
-.fwItem {
-    flex-basis: 100%;
+.fwItem,
+.fwBuilderItem {
+    grid-column: 1 / -1;
+    width: 100%;
 }
 
 .lastItem {
@@ -72,16 +80,33 @@
     flex-wrap: wrap;
 }
 
+.loginlogo {
+    display: block;
+    width: 100%;
+    max-width: 200px;
+    height: auto;
+    margin: 0 auto;
+    padding-bottom: 1rem;
+}
+
+.logincontainer {
+    width: 100%;
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+}
+
 .login {
     width: 35rem;
-    height: auto;
     padding: 1rem;
     margin: 0;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
 
     > .formItem {
-        padding: 0.25em 0;
+        padding: 0;
 
         small {
             position: absolute;
@@ -94,12 +119,11 @@
     }
 
     > .loginitem {
-        width: 100%;
+        grid-column: 1 / -1;
         padding: 0.25em 0;
 
         label {
             width: 100%;
-            padding-bottom: 0.25rem;
         }
 
         button {
@@ -108,27 +132,28 @@
     }
 }
 
-.forgotten {
-    span {
-        display: block;
-        text-align: center;
-        color: var(--paragraph-color);
-        padding: 1rem 0;
+.forgotten span {
+    display: block;
+    text-align: center;
+    color: var(--paragraph-color);
+    padding: 1rem 0;
 
-        a {
-            color: var(--highlight-color);
-            text-decoration: none;
-        }
+    a {
+        color: var(--secondary-color);
+        text-decoration: none;
     }
 }
 
 .lcontainer {
-    --sidebar-width: 35%;
     min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .lwrap {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
 }
 
 .aside {
@@ -139,53 +164,6 @@
     width: var(--sidebar-width);
 }
 
-.fwItem {
-    flex-basis: 100%;
-}
-
-.lastItem .btn {
-    width: 100%;
-}
-
-.login .formItem {
-    padding: 0.25em 0;
-}
-
-.login .formItem small {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    right: 18px;
-    top: 18px;
-    opacity: 0.15;
-}
-
-.login .loginitem {
-    width: 100%;
-    padding: 0.25em 0;
-}
-
-.login .loginitem label {
-    width: 100%;
-    padding-bottom: 0.25rem;
-}
-
-.login .loginitem button {
-    width: 100%;
-}
-
-.forgotten span {
-    display: block;
-    text-align: center;
-    color: var(--paragraph-color);
-    padding: 1rem 0;
-}
-
-.forgotten span a {
-    color: var(--highlight-color);
-    text-decoration: none;
-}
-
 .btn {
     width: max-content;
     display: inline-block;
@@ -207,9 +185,10 @@
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
+    transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
+    padding: 0;
+    background: var(--bg-color);
     font-weight: 300;
-}
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
+}

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

@@ -7,7 +7,7 @@ import {
     Navigate,
     Outlet,
 } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
+import { Flip, ToastContainer } from 'react-toastify';
 import { Tooltip } from 'react-tooltip';
 import 'react-tooltip/dist/react-tooltip.css';
 import 'react-toastify/dist/ReactToastify.css';
@@ -56,7 +56,6 @@ const GenericAuth = ({
                 setUserProfile(data);
                 setIsAuthenticated(true);
             }
-
             setIsLoading(false);
 
             if (location.pathname.split('/')[1] === 'login') {
@@ -138,9 +137,17 @@ const GenericAuth = ({
                 </Route>
             </Routes>
             <ToastContainer
-                theme="light"
-                position="bottom-center"
-                style={{ width: '600px' }}
+                position="bottom-right"
+                autoClose={7000}
+                hideProgressBar={false}
+                newestOnTop
+                closeOnClick
+                rtl={false}
+                pauseOnFocusLoss
+                draggable={false}
+                pauseOnHover
+                theme="dark"
+                transition={Flip}
             />
             <Tooltip id="system-tooltip" />
         </>

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

@@ -1,352 +1,42 @@
-import React, { useEffect, useState } from 'react';
-import { ResponsiveBar } from '@nivo/bar';
-import Select from 'react-select';
-import styles from './styles/GenericDashboard.module.scss';
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import CustomFetch from '../../crm/Fetch';
 
-import CustomFetch from '../Fetch';
-
-function GenericDashboard({ setting, userProfile }) {
+const GenericDashboard = ({ userProfile }) => {
     const [data, setData] = useState([]);
-    const [dropdown, setDropdown] = useState({ filters: [] });
-    const [selectedFilters, setSelectedFilters] = useState({});
-    const [filterValues, setFilterValues] = useState({});
-    const [errorMessage, setErrorMessage] = useState('');
-
-    const customStyles = {
-        control: (base) => ({
-            ...base,
-            height: '51px',
-            minHeight: '51px',
-            padding: '0',
-            borderColor: '#ced4da',
-            borderRadius: '5px',
-            boxShadow: 'none',
-            '&:hover': {
-                borderColor: '#80bdff',
-            },
-        }),
-        valueContainer: (base) => ({
-            ...base,
-            height: '51px',
-            padding: '0 8px',
-            display: 'flex',
-            alignItems: 'center',
-        }),
-    };
-
-    const fetchDropdownData = async () => {
-        try {
-            const response = await CustomFetch(
-                setting.api.dropdownUrl,
-                'POST',
-                {}
-            );
-            setDropdown((prevState) => ({
-                ...prevState,
-                filters: response?.data?.data || [],
-            }));
-        } catch (error) {
-            console.error('Error fetching dropdown data:', error);
-        }
-    };
-
-    const fetchData = async () => {
-        try {
-            const filters = Object.keys(filterValues).reduce((acc, key) => {
-                if (filterValues[key]) {
-                    acc[key] = filterValues[key];
-                }
-                return acc;
-            }, {});
-
-            const response = await CustomFetch(
-                setting.api.fetchDataUrl,
-                'POST',
-                filters
-            );
-            setData(response?.data?.data || []);
-        } catch (error) {
-            console.error('Error fetching data:', error);
-        }
-    };
-
-    const handleFilterChange = (filterId, value) => {
-        setFilterValues((prevValues) => ({
-            ...prevValues,
-            [filterId]: value,
-        }));
-    };
-
-    useEffect(() => {
-        fetchDropdownData();
-    }, []);
-
-    useEffect(() => {
-        fetchData();
-    }, [filterValues]);
 
     return (
-        <div className={styles.grid}>
-            <div className={styles.filterContainer}>
-                <div className={styles.filterHeader}>
-                    <h3>{setting.filters?.title || 'Filters'}</h3>
-                </div>
-                <div className={styles.filterFields}>
-                    {setting.filters?.filters?.map((filter, index) => {
-                        switch (filter.type) {
-                            case 'dateRange':
-                                return (
-                                    <div
-                                        key={index}
-                                        className={styles.filterField}
-                                    >
-                                        <label htmlFor={filter.startDateId}>
-                                            {filter.startDateLabel ||
-                                                'Start Date'}
-                                        </label>
-                                        <input
-                                            id={filter.startDateId}
-                                            type="date"
-                                            value={
-                                                filterValues[
-                                                    filter.startDateId
-                                                ] || ''
-                                            }
-                                            onChange={(e) =>
-                                                handleFilterChange(
-                                                    filter.startDateId,
-                                                    e.target.value
-                                                )
-                                            }
-                                        />
-                                        <label htmlFor={filter.endDateId}>
-                                            {filter.endDateLabel || 'End Date'}
-                                        </label>
-                                        <input
-                                            id={filter.endDateId}
-                                            type="date"
-                                            value={
-                                                filterValues[
-                                                    filter.endDateId
-                                                ] || ''
-                                            }
-                                            onChange={(e) =>
-                                                handleFilterChange(
-                                                    filter.endDateId,
-                                                    e.target.value
-                                                )
-                                            }
-                                        />
-                                    </div>
-                                );
-                            case 'dropdown':
-                                return (
-                                    <div
-                                        key={index}
-                                        className={styles.filterField}
-                                    >
-                                        <label htmlFor={filter.id}>
-                                            {filter.label || 'Select Option'}
-                                        </label>
-                                        <Select
-                                            id={filter.id}
-                                            isMulti={filter.isMulti}
-                                            options={dropdown.filters.map(
-                                                (option) => ({
-                                                    value: option.id,
-                                                    label: option.label,
-                                                })
-                                            )}
-                                            styles={customStyles}
-                                            value={selectedFilters[filter.id]}
-                                            onChange={(value) =>
-                                                handleFilterChange(
-                                                    filter.id,
-                                                    value
-                                                )
-                                            }
-                                        />
-                                    </div>
-                                );
-                            default:
-                                return null;
-                        }
-                    })}
-                    <div className={styles.filterActions}>
-                        <button onClick={fetchData} className="btn btn-primary">
-                            {setting.filters?.applyButtonLabel ||
-                                'Apply Filters'}
-                        </button>
-                        <button
-                            onClick={() => {
-                                setFilterValues({});
-                                setErrorMessage('');
-                            }}
-                            className="btn btn-secondary"
-                        >
-                            {setting.filters?.clearButtonLabel ||
-                                'Clear Filters'}
-                        </button>
+        <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>
-                {errorMessage && (
-                    <div className={styles.errorMessage}>
-                        <p>{errorMessage}</p>
+                <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>
-
-            {setting.widgets?.map((widget, index) => {
-                switch (widget.type) {
-                    case 'chart':
-                        return (
-                            <div key={index} className={styles.grid__row}>
-                                <div className={styles.grid__dashfull}>
-                                    <div className={styles.widgetTitle}>
-                                        <h2>
-                                            {widget.title || 'Chart Widget'}
-                                        </h2>
-                                    </div>
-                                    <div style={{ height: 600 }}>
-                                        {data.length > 0 ? (
-                                            <ResponsiveBar
-                                                data={data}
-                                                keys={widget.keys || []}
-                                                indexBy={
-                                                    widget.indexBy ||
-                                                    'supervisor'
-                                                }
-                                                margin={
-                                                    widget.margin || {
-                                                        top: 20,
-                                                        right: 200,
-                                                        bottom: 110,
-                                                        left: 80,
-                                                    }
-                                                }
-                                                padding={0.2}
-                                                valueScale={{ type: 'linear' }}
-                                                indexScale={{
-                                                    type: 'band',
-                                                    round: true,
-                                                }}
-                                                colors={{
-                                                    scheme:
-                                                        widget.colorScheme ||
-                                                        'set3',
-                                                }}
-                                                borderColor={{
-                                                    from: 'color',
-                                                    modifiers: [
-                                                        ['darker', 1.6],
-                                                    ],
-                                                }}
-                                                axisBottom={
-                                                    widget.axisBottom || {
-                                                        tickSize: 5,
-                                                        tickPadding: 5,
-                                                        tickRotation: 45,
-                                                    }
-                                                }
-                                                axisLeft={
-                                                    widget.axisLeft || {
-                                                        tickSize: 5,
-                                                        tickPadding: 5,
-                                                    }
-                                                }
-                                                legends={widget.legends || []}
-                                            />
-                                        ) : (
-                                            <div>Loading chart...</div>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    case 'table':
-                        return (
-                            <div key={index} className={styles.grid__row}>
-                                <div className={styles.grid__dashfull}>
-                                    <div className={styles.widgetTitle}>
-                                        <h2>
-                                            {widget.title || 'Table Widget'}
-                                        </h2>
-                                    </div>
-                                    <div className={styles.tableContainer}>
-                                        {data.length > 0 ? (
-                                            <table>
-                                                <thead>
-                                                    <tr>
-                                                        <th>
-                                                            {widget.tableHeader ||
-                                                                'Data'}
-                                                        </th>
-                                                        {data.map(
-                                                            (row, index) => (
-                                                                <th key={index}>
-                                                                    {
-                                                                        row.supervisor
-                                                                    }
-                                                                </th>
-                                                            )
-                                                        )}
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    {widget.keys?.map(
-                                                        (key, index) => {
-                                                            let total = 0;
-                                                            return (
-                                                                <tr key={index}>
-                                                                    <td>
-                                                                        {key}
-                                                                    </td>
-                                                                    {data.map(
-                                                                        (
-                                                                            row
-                                                                        ) => {
-                                                                            const count =
-                                                                                row[
-                                                                                    key
-                                                                                ] ||
-                                                                                0;
-                                                                            total +=
-                                                                                count;
-                                                                            return (
-                                                                                <td
-                                                                                    key={
-                                                                                        row.supervisor
-                                                                                    }
-                                                                                >
-                                                                                    {
-                                                                                        count
-                                                                                    }
-                                                                                </td>
-                                                                            );
-                                                                        }
-                                                                    )}
-                                                                    <td>
-                                                                        {total}
-                                                                    </td>
-                                                                </tr>
-                                                            );
-                                                        }
-                                                    )}
-                                                </tbody>
-                                            </table>
-                                        ) : (
-                                            <div>No data available</div>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    default:
-                        return null;
-                }
-            })}
         </div>
     );
-}
+};
 
 export default GenericDashboard;