@visns-studio/visns-components 4.7.2 → 4.7.3

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

@@ -0,0 +1,216 @@
+.formItem {
+    width: 50%;
+    padding: 0.5em;
+    position: relative;
+    box-sizing: border-box;
+
+    .fi__label {
+        position: relative;
+    }
+
+    .fi__span {
+        position: absolute;
+        transition: all 200ms;
+        opacity: 0.8;
+        left: 0;
+        padding: 19px 20px;
+        transform-origin: top left;
+        cursor: text;
+    }
+
+    .fi__div {
+        transition: all 200ms;
+        opacity: 0.8;
+        left: 0;
+        padding: 19px 13px;
+        border-radius: var(--br);
+        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+        box-shadow: none;
+    }
+
+    .fi__toggle {
+        width: max-content;
+        padding: 0px 10px 0px 0;
+        box-sizing: border-box;
+        display: inline;
+    }
+
+    .fi__toggletxt {
+        position: relative;
+        left: 5px;
+        font-size: 0.95em;
+        top: -5px;
+    }
+}
+
+.fwItem {
+    flex-basis: 100%;
+}
+
+.lastItem {
+    .btn {
+        width: 100%;
+    }
+}
+
+.loginlogo {
+    display: block;
+    width: 100%;
+    max-width: 140px;
+    height: auto;
+    margin: 0 auto;
+    padding-bottom: 1rem;
+}
+
+.logincontainer {
+    margin-left: var(--sidebar-width);
+    min-height: 100vh;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    flex-wrap: wrap;
+}
+
+.login {
+    width: 35rem;
+    height: auto;
+    padding: 1rem;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+
+    > .formItem {
+        padding: 0.25em 0;
+
+        small {
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            right: 18px;
+            top: 18px;
+            opacity: 0.15;
+        }
+    }
+
+    > .loginitem {
+        width: 100%;
+        padding: 0.25em 0;
+
+        label {
+            width: 100%;
+            padding-bottom: 0.25rem;
+        }
+
+        button {
+            width: 100%;
+        }
+    }
+}
+
+.forgotten {
+    span {
+        display: block;
+        text-align: center;
+        color: var(--paragraph-color);
+        padding: 1rem 0;
+
+        a {
+            color: var(--highlight-color);
+            text-decoration: none;
+        }
+    }
+}
+
+.lcontainer {
+    --sidebar-width: 35%;
+    min-height: 100vh;
+}
+
+.lwrap {
+    display: flex;
+}
+
+.aside {
+    opacity: 1;
+    position: fixed;
+    overflow: hidden;
+    height: 101%;
+    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;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+}
+
+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);
+    opacity: 1;
+    padding: 0 4px;
+    background: var(--tertiary-color);
+    font-weight: 300;
+}

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

@@ -0,0 +1,216 @@
+.formItem {
+    width: 50%;
+    padding: 0.5em;
+    position: relative;
+    box-sizing: border-box;
+
+    .fi__label {
+        position: relative;
+    }
+
+    .fi__span {
+        position: absolute;
+        transition: all 200ms;
+        opacity: 0.8;
+        left: 0;
+        padding: 19px 20px;
+        transform-origin: top left;
+        cursor: text;
+    }
+
+    .fi__div {
+        transition: all 200ms;
+        opacity: 0.8;
+        left: 0;
+        padding: 19px 13px;
+        border-radius: var(--br);
+        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+        box-shadow: none;
+    }
+
+    .fi__toggle {
+        width: max-content;
+        padding: 0px 10px 0px 0;
+        box-sizing: border-box;
+        display: inline;
+    }
+
+    .fi__toggletxt {
+        position: relative;
+        left: 5px;
+        font-size: 0.95em;
+        top: -5px;
+    }
+}
+
+.fwItem {
+    flex-basis: 100%;
+}
+
+.lastItem {
+    .btn {
+        width: 100%;
+    }
+}
+
+.loginlogo {
+    display: block;
+    width: 100%;
+    max-width: 140px;
+    height: auto;
+    margin: 0 auto;
+    padding-bottom: 1rem;
+}
+
+.logincontainer {
+    margin-left: var(--sidebar-width);
+    min-height: 100vh;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    flex-wrap: wrap;
+}
+
+.login {
+    width: 35rem;
+    height: auto;
+    padding: 1rem;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+
+    > .formItem {
+        padding: 0.25em 0;
+
+        small {
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            right: 18px;
+            top: 18px;
+            opacity: 0.15;
+        }
+    }
+
+    > .loginitem {
+        width: 100%;
+        padding: 0.25em 0;
+
+        label {
+            width: 100%;
+            padding-bottom: 0.25rem;
+        }
+
+        button {
+            width: 100%;
+        }
+    }
+}
+
+.forgotten {
+    span {
+        display: block;
+        text-align: center;
+        color: var(--paragraph-color);
+        padding: 1rem 0;
+
+        a {
+            color: var(--highlight-color);
+            text-decoration: none;
+        }
+    }
+}
+
+.lcontainer {
+    --sidebar-width: 35%;
+    min-height: 100vh;
+}
+
+.lwrap {
+    display: flex;
+}
+
+.aside {
+    opacity: 1;
+    position: fixed;
+    overflow: hidden;
+    height: 101%;
+    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;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+    font-size: 1.25em;
+}
+
+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);
+    opacity: 1;
+    padding: 0 4px;
+    background: var(--tertiary-color);
+    font-weight: 300;
+}

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

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import dayjs from 'dayjs';
+import Breadcrumb from '../Breadcrumb';
+import CustomFetch from '../Fetch';
+import styles from './styles/AuditLog.module.scss';
+
+const AuditLog = ({ userProfile }) => {
+    const routeParams = useParams();
+    const [data, setData] = useState({});
+
+    const fetchData = async () => {
+        const res = await CustomFetch(
+            `/ajax/audits/${routeParams.dataId}`,
+            'GET'
+        );
+
+        setData(res.data);
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, [routeParams.dataId]);
+
+    return (
+        <div>
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
+                        <Breadcrumb
+                            data={data}
+                            page={{
+                                title: 'Audit Logs',
+                                previousUrl: '/auditLogs',
+                                titleKey: 'id',
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+            <div className={styles.grid}>
+                <div className={styles.grid__subrow}>
+                    <div className={styles.grid__full}>
+                        <div className={styles.gridtxt}>
+                            <ul className={styles.customer__overview}>
+                                <li>
+                                    <strong>User:</strong>
+                                    {` ${data?.user?.name}`}
+                                </li>
+                                <li>
+                                    <strong>Created At:</strong>
+                                    {` ${
+                                        data?.created_at
+                                            ? dayjs(data.created_at).format(
+                                                  'MM-DD-YYYY hh:mm A'
+                                              )
+                                            : ''
+                                    }`}
+                                </li>
+                                <li>
+                                    <strong>IP Address:</strong>
+                                    {` ${data?.ip_address}`}
+                                </li>
+                                <li>
+                                    <strong>URL:</strong>
+                                    {` ${data?.url}`}
+                                </li>
+                                <li>
+                                    <strong>Event:</strong>
+                                    {` ${data?.formatted_event}`}
+                                </li>
+                                <li
+                                    className={`${styles['fw-grid-item']} ${styles.notecolor}`}
+                                >
+                                    <strong>Old Value(s):</strong>
+                                    <br />
+                                    <pre>
+                                        {JSON.stringify(
+                                            data?.old_values,
+                                            null,
+                                            4
+                                        )}
+                                    </pre>
+                                </li>
+                                <li
+                                    className={`${styles['fw-grid-item']} ${styles.notecolor}`}
+                                >
+                                    <strong>New Value(s):</strong>
+                                    <br />
+
+                                    <pre>
+                                        {JSON.stringify(
+                                            data?.new_values,
+                                            null,
+                                            4
+                                        )}
+                                    </pre>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AuditLog;

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import Table from '../DataGrid';
+import styles from './styles/AuditLogs.module.scss';
+
+const AuditLogs = ({ layout }) => {
+    const setting = {
+        ajaxSetting: {
+            url: '/ajax/audits/table',
+            take: 25,
+            sortBy: 'id',
+            sort: 'desc',
+            where: [],
+        },
+        form: {
+            primaryKey: 'id',
+            url: '/ajax/audits',
+            createDisable: true,
+            create: {},
+            update: {},
+            fields: [],
+        },
+        columns: [
+            {
+                id: ['user'],
+                label: 'User',
+                type: 'relation',
+                nameFrom: 'name',
+                link: {
+                    url: '/auditLogs/',
+                    key: 'id',
+                },
+            },
+            {
+                id: 'formatted_old_values',
+                label: 'Old Values',
+                type: 'text',
+                link: {
+                    url: '/auditLogs/',
+                    key: 'id',
+                },
+            },
+            {
+                id: 'formatted_new_values',
+                label: 'New Values',
+                type: 'text',
+                link: {
+                    url: '/auditLogs/',
+                    key: 'id',
+                },
+            },
+            {
+                id: 'formatted_event',
+                label: 'Event',
+                type: 'text',
+                link: {
+                    url: '/auditLogs/',
+                    key: 'id',
+                },
+            },
+            {
+                id: 'ip_address',
+                label: 'IP Address',
+                type: 'text',
+                link: {
+                    url: '/auditLogs/',
+                    key: 'id',
+                },
+            },
+            {
+                id: 'created_at',
+                label: 'Created At',
+                type: 'datetime',
+                minWidth: 200,
+                maxWidth: 200,
+                link: {
+                    url: '/auditLogs/',
+                    key: 'id',
+                },
+            },
+        ],
+        settings: [],
+    };
+
+    return (
+        <div>
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div
+                        className={`${styles.grid__full} ${
+                            layout === 'full'
+                                ? styles.crmtitle
+                                : styles.crmtitleSimple
+                        }`}
+                    >
+                        <h1>Audit Logs</h1>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div className={styles.grid__full}>
+                        <Table
+                            ajaxSetting={setting.ajaxSetting}
+                            form={setting.form}
+                            columns={setting.columns}
+                            settings={setting.settings}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AuditLogs;