@visns-studio/visns-components 2.3.2 → 2.3.4

package/components/cms/DataGrid.jsx

@@ -93,14 +93,12 @@ const loadData = async (
 
 const DataGrid = ({
     ajaxSetting,
-    form,
     columns,
+    form,
+    gridHeight,
     settings,
     setFilterData,
     style,
-    tableFilters,
-    historySearch,
-    historyUrl,
 }) => {
     const navigate = useNavigate();
 
@@ -325,7 +323,6 @@ const DataGrid = ({
 
     const sortTrigger = () => {
         const url = form.url.replace('/ajax', '');
-        console.info(url);
         const newState = {
             form: form,
         };
@@ -1294,7 +1291,9 @@ const DataGrid = ({
     const [dataCount, setDataCount] = useState(0);
     const [gridStyle, setGridStyle] = useState({
         minHeight:
-            dataCount > 5
+            gridHeight && gridHeight > 0
+                ? gridHeight
+                : dataCount > 5
                 ? dataCount > 8
                     ? windowHeight * 0.7 > 550
                         ? windowHeight * 0.7
@@ -1311,7 +1310,9 @@ const DataGrid = ({
         setGridStyle((prevState) => ({
             ...prevState,
             minHeight:
-                dataCount > 5
+                gridHeight && gridHeight > 0
+                    ? gridHeight
+                    : dataCount > 5
                     ? dataCount > 8
                         ? windowHeight * 0.7 > 550
                             ? windowHeight * 0.7
@@ -1321,7 +1322,9 @@ const DataGrid = ({
         }));
 
         let dgHeight =
-            dataCount > 5
+            gridHeight && gridHeight > 0
+                ? gridHeight
+                : dataCount > 5
                 ? dataCount > 8
                     ? windowHeight * 0.7 > 550
                         ? windowHeight * 0.7
@@ -1329,7 +1332,7 @@ const DataGrid = ({
                     : 450
                 : 400;
 
-        let rowCount = Math.floor((dgHeight - 50) / 50);
+        let rowCount = Math.floor((dgHeight - 100) / 40);
         setLimit(rowCount);
     }, [dataCount]);
 

package/components/cms/Form.jsx

@@ -1,25 +1,25 @@
-import React, { useState, useEffect } from "react";
-import CustomFetch from "../crm/Fetch";
-import Field from "./Field";
-import slugify from "react-slugify";
-import moment from "moment";
-import Reveal from "react-reveal/Reveal";
-import parse from "html-react-parser";
-import { confirmAlert } from "react-confirm-alert";
-import { toast } from "react-toastify";
-import { Copy, TrashBin } from "akar-icons";
-
-import "react-confirm-alert/src/react-confirm-alert.css";
+import React, { useState, useEffect } from 'react';
+import CustomFetch from '../crm/Fetch';
+import Field from './Field';
+import slugify from 'react-slugify';
+import moment from 'moment';
+import Reveal from 'react-reveal/Reveal';
+import parse from 'html-react-parser';
+import { confirmAlert } from 'react-confirm-alert';
+import { toast } from 'react-toastify';
+import { Copy, TrashBin } from 'akar-icons';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
 
 function Form(props) {
-    const { dataId, navigate, form, setActiveNav } = props;
+    const { dataId, navigate, form } = props;
     const [data, setData] = useState({});
     const [dataClass, setDataClass] = useState({});
     const [audit, setAudit] = useState({
         createdBy: {},
-        created: "",
+        created: '',
         updatedBy: {},
-        updated: "",
+        updated: '',
     });
     const [uploadProgress, setUploadProgress] = useState({});
 
@@ -28,7 +28,7 @@ function Form(props) {
             const { name, value } = e.target;
 
             switch (e.target.name) {
-                case "title":
+                case 'title':
                     setData((prevState) => ({
                         ...prevState,
                         [name]: value,
@@ -39,7 +39,7 @@ function Form(props) {
                         slug: slugify(value),
                     }));
                     break;
-                case "name":
+                case 'name':
                     setData((prevState) => ({
                         ...prevState,
                         [name]: value,
@@ -118,7 +118,7 @@ function Form(props) {
                     }));
                 },
             }).then((response) => {
-                if (data.hasOwnProperty("files")) {
+                if (data.hasOwnProperty('files')) {
                     let _files = data.files;
                     let _new = true;
 
@@ -184,32 +184,32 @@ function Form(props) {
         if (e) {
             e.preventDefault();
 
-            let error = "";
-            let url = "";
-            let method = "";
-            let message = "";
+            let error = '';
+            let url = '';
+            let method = '';
+            let message = '';
 
-            if (data.title === "") {
-                error += "Please enter a title.<br />";
+            if (data.title === '') {
+                error += 'Please enter a title.<br />';
             }
 
-            if (data.summary === "") {
-                error += "Please enter a summary.<br />";
+            if (data.summary === '') {
+                error += 'Please enter a summary.<br />';
             }
 
-            if (error === "") {
-                if (dataId === "create") {
+            if (error === '') {
+                if (dataId === 'create') {
                     url = form.url;
-                    method = "POST";
-                    message = "You have successfully created a new entry.";
+                    method = 'POST';
+                    message = 'You have successfully created a new entry.';
                 } else {
-                    url = form.url + "/" + dataId;
-                    method = "PUT";
-                    message = "You have successfully updated this entry.";
+                    url = form.url + '/' + dataId;
+                    method = 'PUT';
+                    message = 'You have successfully updated this entry.';
                 }
 
                 CustomFetch(url, method, data, function (result) {
-                    if (result.error === "") {
+                    if (result.error === '') {
                         let _uploadProgress = uploadProgress;
 
                         Object.keys(_uploadProgress).forEach((a, b) => {
@@ -221,10 +221,10 @@ function Form(props) {
 
                         toast.success(message);
 
-                        if (dataId === "create") {
+                        if (dataId === 'create') {
                             navigate(
-                                form.url.replace("/ajax", "") +
-                                    "/" +
+                                form.url.replace('/ajax', '') +
+                                    '/' +
                                     result.data.id,
                                 {
                                     state: {
@@ -246,21 +246,21 @@ function Form(props) {
     const handleDelete = (e) => {
         if (e) {
             confirmAlert({
-                title: "Delete this entry",
-                message: "Are you sure you want to delete it?",
+                title: 'Delete this entry',
+                message: 'Are you sure you want to delete it?',
                 buttons: [
                     {
-                        label: "Yes",
+                        label: 'Yes',
                         onClick: () =>
                             CustomFetch(
                                 `${form.url}/${dataId}`,
-                                "DELETE",
+                                'DELETE',
                                 {},
                                 function (result) {
-                                    if (result.error === "") {
-                                        navigate(form.url.replace("/ajax", ""));
+                                    if (result.error === '') {
+                                        navigate(form.url.replace('/ajax', ''));
                                         toast.success(
-                                            "You have successfully deleted this entry."
+                                            'You have successfully deleted this entry.'
                                         );
                                     } else {
                                         toast.error(result.error);
@@ -269,7 +269,7 @@ function Form(props) {
                             ),
                     },
                     {
-                        label: "No",
+                        label: 'No',
                         onClick: () => close(),
                     },
                 ],
@@ -281,14 +281,14 @@ function Form(props) {
         form.fields.forEach((a) => {
             setData((prevState) => ({
                 ...prevState,
-                [a.id]: "",
+                [a.id]: '',
             }));
         });
 
-        if (dataId !== "create") {
+        if (dataId !== 'create') {
             CustomFetch(
                 `${form.url}/${dataId}`,
-                "GET",
+                'GET',
                 {},
                 function (result) {
                     let now = moment();
@@ -306,32 +306,32 @@ function Form(props) {
                         created:
                             created.hours() > 24
                                 ? created.days() +
-                                  " Days " +
+                                  ' Days ' +
                                   created.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   created.minutes() +
-                                  " Minutes"
+                                  ' Minutes'
                                 : created.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   created.minutes() +
-                                  " Minutes",
+                                  ' Minutes',
                         updatedBy: result.audit_latest,
                         updated:
                             updated.hours() > 24
                                 ? updated.days() +
-                                  " Days " +
+                                  ' Days ' +
                                   updated.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   updated.minutes() +
-                                  " Minutes"
+                                  ' Minutes'
                                 : updated.hours() +
-                                  " Hour(s) " +
+                                  ' Hour(s) ' +
                                   updated.minutes() +
-                                  " Minutes",
+                                  ' Minutes',
                     }));
                 },
                 function (error) {
-                    navigate("/");
+                    navigate('/');
 
                     toast.error(String(error));
                 }
@@ -341,7 +341,7 @@ function Form(props) {
 
     useEffect(() => {
         form.fields.forEach((a) => {
-            if (a.type === "image") {
+            if (a.type === 'image') {
                 setUploadProgress((prevState) => ({
                     ...prevState,
                     [a.id]: 0,
@@ -350,17 +350,16 @@ function Form(props) {
 
             setData((prevState) => ({
                 ...prevState,
-                [a.id]: "",
+                [a.id]: '',
             }));
 
             setDataClass((prevState) => ({
                 ...prevState,
-                [a.id]: "",
+                [a.id]: '',
             }));
         });
 
         fetchData();
-        setActiveNav();
     }, [dataId]);
 
     return (
@@ -371,7 +370,7 @@ function Form(props) {
                         <h1>
                             {data.title
                                 ? data.title
-                                : dataId !== "create"
+                                : dataId !== 'create'
                                 ? form.update.title
                                 : form.create.title}
                         </h1>
@@ -380,8 +379,8 @@ function Form(props) {
                                 className="btn actionbtn"
                                 onClick={handleSubmit}
                             >
-                                <Copy size={18} strokeWidth={2} />{" "}
-                                {dataId !== "create" ? "Save" : "Create"}
+                                <Copy size={18} strokeWidth={2} />{' '}
+                                {dataId !== 'create' ? 'Save' : 'Create'}
                             </button>
                         </div>
                     </div>
@@ -396,19 +395,19 @@ function Form(props) {
                                     settings={a}
                                     key={
                                         b +
-                                        "-fields-" +
-                                        (a.hasOwnProperty("key")
-                                            ? a.id + "-" + a.key
+                                        '-fields-' +
+                                        (a.hasOwnProperty('key')
+                                            ? a.id + '-' + a.key
                                             : a.id)
                                     }
                                     inputValue={
-                                        a.hasOwnProperty("key")
+                                        a.hasOwnProperty('key')
                                             ? data[a.key]
                                             : Array.isArray(data[a.id]) &&
-                                              a.type === "image"
+                                              a.type === 'image'
                                             ? data[a.id].length > 0
                                                 ? data[a.id][0]
-                                                : ""
+                                                : ''
                                             : data[a.id]
                                     }
                                     inputClass={dataClass}
@@ -432,7 +431,7 @@ function Form(props) {
                             Created: <span>{audit.created} Ago</span>
                         </li>
                         <li>
-                            By:{" "}
+                            By:{' '}
                             <span>
                                 {audit &&
                                 audit.createdBy &&
@@ -445,7 +444,7 @@ function Form(props) {
                             Last Update: <span>{audit.updated} Ago</span>
                         </li>
                         <li>
-                            by:{" "}
+                            by:{' '}
                             <span>
                                 {audit &&
                                 audit.updatedBy &&
@@ -454,13 +453,13 @@ function Form(props) {
                                     : null}
                             </span>
                         </li>
-                        {dataId !== "create" ? (
+                        {dataId !== 'create' ? (
                             <li>
                                 <button
                                     className="btn actionbtn deletebtn"
                                     onClick={handleDelete}
                                 >
-                                    <TrashBin size={14} strokeWidth={2} />{" "}
+                                    <TrashBin size={14} strokeWidth={2} />{' '}
                                     Delete Entry
                                 </button>
                             </li>

package/components/cms/generic/CmsDetail.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import CmsForm from '../Form';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+function CmsDetail({}) {
+    const { dataId } = useParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { form } = location.state;
+
+    return (
+        <Reveal effect="fadeInUp">
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full">
+                        <CmsForm
+                            dataId={dataId}
+                            navigate={navigate}
+                            form={form}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Reveal>
+    );
+}
+
+export default CmsDetail;

package/components/cms/generic/CmsIndex.jsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import DataGrid from '../DataGrid';
+
+function CmsIndex({ setting, userProfile }) {
+    const { ajaxSetting, columns, form, filters, page, settings } = setting;
+
+    const [config, setConfig] = useState({});
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+    const pageTitle = page?.title;
+
+    useEffect(() => {
+        setConfig(() => ({
+            ajaxSetting,
+            form,
+            columns,
+            settings,
+        }));
+    }, [setting]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // Clean up the event listener
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    return (
+        <>
+            <Reveal effect="fadeInUp">
+                <>
+                    <div className="grid">
+                        <div className="grid__row">
+                            <div className="grid__full cmstitle">
+                                <h1>{pageTitle}</h1>
+                            </div>
+                        </div>
+                    </div>
+                    {config.ajaxSetting &&
+                        config.form &&
+                        config.columns &&
+                        config.settings && (
+                            <div className="grid">
+                                <div className="grid__row">
+                                    <div className="grid__full">
+                                        <DataGrid
+                                            {...config}
+                                            gridHeight={windowHeight * 0.65}
+                                            style={
+                                                userProfile?.settings?.style ||
+                                                {}
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    <Outlet />
+                </>
+            </Reveal>
+        </>
+    );
+}
+
+export default CmsIndex;

package/components/cms/generic/CmsSort.jsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import { arrayMoveImmutable } from 'array-move';
+import { toast } from 'react-toastify';
+import CustomFetch from '../../crm/Fetch';
+import SortableList from '../sorting/List';
+
+function CmsSort({}) {
+    const location = useLocation();
+    const { form } = location.state;
+    const [data, setData] = useState([]);
+    const url = form.url;
+
+    const onSortEnd = ({ oldIndex, newIndex }) => {
+        setData((prevItem) => arrayMoveImmutable(prevItem, oldIndex, newIndex));
+    };
+
+    useEffect(() => {
+        if (data.length > 0) {
+            CustomFetch(
+                url + '/sort_update',
+                'POST',
+                {
+                    list: data,
+                },
+                function (result) {
+                    if (result.error === '') {
+                    } else {
+                        toast.error(String(result.error));
+                    }
+                }
+            );
+        }
+    }, [data]);
+
+    useEffect(() => {
+        CustomFetch(url + '/sort_list', 'POST', {}, function (result) {
+            setData(result);
+        });
+    }, []);
+
+    return (
+        <Reveal effect="fadeInUp">
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full cmstitle">
+                        <h1>{form.sort.title}</h1>
+                    </div>
+                </div>
+            </div>
+            <div className="grid">
+                <div className="grid__row">
+                    <div className="grid__full">
+                        <SortableList
+                            items={data}
+                            onSortEnd={onSortEnd}
+                            axis="xy"
+                            helperClass="dragitem"
+                            transitionDuration={250}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Reveal>
+    );
+}
+
+export default CmsSort;

package/components/crm/Form.jsx

@@ -163,12 +163,12 @@ function Form(props) {
 
                 Object.keys(inputValue).forEach((a) => {
                     if (formData.hasOwnProperty(a)) {
-                        updateFormData({
+                        updateFormData((prevState) => ({
                             [a]:
-                                prevState[a] !== ''
+                                prevState && prevState[a] !== ''
                                     ? prevState[a]
                                     : inputValue[a],
-                        });
+                        }));
                     }
                 });
 
@@ -224,20 +224,22 @@ function Form(props) {
 
         const id = e.target.dataset.jsonkey || e.target.dataset.name;
 
-        setFormData((prevState) => ({
-            ...prevState,
-            [id]: e.target.checked,
-        }));
+        const updateFormData = (dataToUpdate) => {
+            setFormData((prevState) => ({
+                ...prevState,
+                ...dataToUpdate,
+            }));
+        };
 
-        if (id === 'same_address') {
-            const postalData = e.target.checked
+        const updatePostalData = (checked) => {
+            const postalData = checked
                 ? {
-                      postal_address1: prevState.address1,
-                      postal_address2: prevState.address2,
-                      postal_suburb: prevState.suburb,
-                      postal_postcode: prevState.postcode,
-                      postal_state: prevState.state,
-                      postal_country: prevState.country,
+                      postal_address1: formData.address1,
+                      postal_address2: formData.address2,
+                      postal_suburb: formData.suburb,
+                      postal_postcode: formData.postcode,
+                      postal_state: formData.state,
+                      postal_country: formData.country,
                   }
                 : {
                       postal_address1: '',
@@ -248,10 +250,11 @@ function Form(props) {
                       postal_country: '',
                   };
 
-            setFormData((prevState) => ({
-                ...prevState,
-                ...postalData,
-            }));
+            updateFormData(postalData);
+        };
+
+        if (id === 'same_address') {
+            updatePostalData(e.target.checked);
         }
 
         if (e.target.dataset.show) {
@@ -260,28 +263,26 @@ function Form(props) {
                 : [];
 
             if (_show.length > 0) {
-                const _fields = [...formSettings.fields];
-
-                _show.forEach((showObject) => {
-                    const { id, value } = showObject;
-
-                    if (id && value && value.length > 0) {
-                        const index = _fields.findIndex(
-                            (field) => field.id === id
+                const updatedFields = formSettings.fields.map((field) => {
+                    const showObject = _show.find(
+                        (showItem) => showItem.id === field.id
+                    );
+                    if (
+                        showObject &&
+                        showObject.value &&
+                        showObject.value.length > 0
+                    ) {
+                        field.hide = !showObject.value.includes(
+                            e.target.checked
                         );
-
-                        if (index !== -1) {
-                            _fields[index].hide = !value.includes(
-                                e.target.checked
-                            );
-                        }
                     }
+                    return field;
                 });
 
                 if (updateForm) {
                     updateForm((prevState) => ({
                         ...prevState,
-                        fields: _fields,
+                        fields: updatedFields,
                     }));
                 }
             }
@@ -776,50 +777,36 @@ function Form(props) {
     }, []);
 
     useEffect(() => {
-        formSettings.fields.forEach((a) => {
-            if (a.hasOwnProperty('show') && a.show.length > 0) {
-                let _show = a.show;
-                if (_show.length > 0) {
-                    _show.forEach((showObject) => {
-                        if (
-                            showObject.hasOwnProperty('id') &&
-                            showObject.hasOwnProperty('value')
-                        ) {
-                            if (
-                                showObject.id !== '' &&
-                                showObject.value.length > 0
-                            ) {
-                                let _fields = formSettings.fields;
-                                let _counter;
-                                _fields.forEach((a, b) => {
-                                    if (a.id === showObject.id) {
-                                        _counter = b;
-                                    }
-                                });
+        formSettings.fields.forEach((field) => {
+            const showConditions = field.show || [];
 
-                                let _valueChecker = formData[a.id];
+            showConditions.forEach((showObject) => {
+                const { id, value } = showObject;
 
-                                if (
-                                    _counter >= 0 &&
-                                    showObject.value.includes(_valueChecker) ===
-                                        true
-                                ) {
-                                    _fields[_counter].hide = false;
-                                } else {
-                                    _fields[_counter].hide = true;
-                                }
+                if (id !== '' && value.length > 0) {
+                    const targetField = formSettings.fields.find(
+                        (f) => f.id === id
+                    );
 
-                                if (updateForm) {
-                                    updateForm((prevState) => ({
-                                        ...prevState,
-                                        fields: _fields,
-                                    }));
-                                }
+                    if (targetField) {
+                        const valueChecker = formData[field.id];
+
+                        if (valueChecker) {
+                            const shouldShow =
+                                valueChecker && value.includes(valueChecker);
+
+                            targetField.hide = !shouldShow;
+
+                            if (updateForm) {
+                                updateForm((prevState) => ({
+                                    ...prevState,
+                                    fields: [...formSettings.fields],
+                                }));
                             }
                         }
-                    });
+                    }
                 }
-            }
+            });
         });
     }, [fetchTrigger]);
 

package/components/crm/Navigation.jsx

@@ -9,18 +9,22 @@ import {
     Clipboard,
     DoubleSword,
     Draft,
+    Gear,
     Grid,
     Home,
     LightBulb,
     Microphone,
     Newspaper,
+    Paper,
     PeopleGroup,
     PeopleMultiple,
     Person,
     SettingsVertical,
+    ShippingBoxV1,
     SignOut,
     Shield,
     StatisticUp,
+    TextAlignLeft,
     Ticket,
     Utensils,
 } from 'akar-icons';
@@ -28,12 +32,21 @@ import {
 import CustomFetch from './Fetch';
 import Notification from './Notification';
 
-function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
+function Navigation({
+    children,
+    layout = 'full',
+    logo,
+    navConfig,
+    searchComponent,
+    setSystemAuth,
+    userProfile,
+}) {
     const location = useLocation();
     const navigate = useNavigate();
     const currentPage = location.pathname.substr(1) || 'dashboard';
-    const [navData, setNavData] = useState(navConfig);
+    const [isOpen, setOpen] = useState('false');
     const [isScrolled, setIsScrolled] = useState(false);
+    const [navData, setNavData] = useState(navConfig);
     const appNavClasses = `app-nav ${isScrolled ? 'navscrolled' : ''}`;
 
     const handleLogout = () => {
@@ -100,15 +113,20 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
             clipboard: Clipboard,
             doubleSword: DoubleSword,
             draft: Draft,
+            gear: Gear,
             grid: Grid,
             home: Home,
             lightBulb: LightBulb,
             microphone: Microphone,
             newspaper: Newspaper,
+            paper: Paper,
             peopleGroup: PeopleGroup,
             peopleMultiple: PeopleMultiple,
             settingsVertical: SettingsVertical,
+            signOut: SignOut,
+            shippingboxv1: ShippingBoxV1,
             statisticUp: StatisticUp,
+            textAlignLeft: TextAlignLeft,
             ticket: Ticket,
             utensils: Utensils,
         };
@@ -235,9 +253,12 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
                 };
 
                 const currentUrl = cleanUrl(currentPage);
+                const navUrl = cleanUrl(nav.url)
+                    ? cleanUrl(nav.url)
+                    : 'dashboard';
 
                 if (
-                    cleanUrl(nav.url) === currentUrl ||
+                    navUrl === currentUrl ||
                     (nav.children &&
                         nav.children.some(
                             (child) => cleanUrl(child.url) === currentUrl
@@ -267,7 +288,73 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
         };
     }, []);
 
-    return (
+    return layout === 'simple' || layout === 'cms' ? (
+        <div className="cwrap">
+            <aside
+                className={
+                    layout === 'cms'
+                        ? 'aside--cms aside--cms--open'
+                        : 'aside aside--open'
+                }
+            >
+                <div className="logo">
+                    <Link to="/">
+                        <img src={logo} alt="Visns Studio CRM" />
+                    </Link>
+                </div>
+                <div className="awrap">
+                    <nav className="navwrap">
+                        <ul className={appNavClasses}>
+                            {navData.navigations.map((nav, navKey) =>
+                                nav.permission === true ||
+                                nav.permissionKey === '' ? (
+                                    <React.Fragment key={`nav-item-${navKey}`}>
+                                        {renderNav(nav)}
+                                    </React.Fragment>
+                                ) : null
+                            )}
+                        </ul>
+                    </nav>
+                </div>
+            </aside>
+            <main className="content">
+                <div className="content-header">
+                    {searchComponent}
+                    <div className="content-title">
+                        <button
+                            className={
+                                isOpen ? 'mobmenu' : 'mobmenu mobmenu--open'
+                            }
+                            onClick={() => {
+                                setOpen(!isOpen);
+                            }}
+                        >
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </button>
+                    </div>
+                    <div className="hactions">
+                        <ul>
+                            {navData.settings.map((setting, settingKey) =>
+                                setting.permission === true ? (
+                                    <React.Fragment
+                                        key={`setting-${settingKey}`}
+                                    >
+                                        {renderSetting(setting)}
+                                    </React.Fragment>
+                                ) : null
+                            )}
+                        </ul>
+                    </div>
+                </div>
+                {children}
+            </main>
+        </div>
+    ) : (
         <header className="header">
             <div className="hwrap">
                 <div className="logo">

package/components/crm/generic/GenericIndex.jsx

@@ -3,8 +3,8 @@ import { Outlet } from 'react-router-dom';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
-function GenericIndex({ setting, userProfile }) {
-    const { filters, page, tabs, ajaxSetting, form, columns, settings } =
+function GenericIndex({ layout = 'full', setting, userProfile }) {
+    const { ajaxSetting, columns, form, filters, page, settings, tabs } =
         setting;
 
     const [config, setConfig] = useState({});
@@ -27,7 +27,7 @@ function GenericIndex({ setting, userProfile }) {
     }, [setting]);
 
     useEffect(() => {
-        if (tabs && tabs.length > 0) {
+        if (tabs && tabs.length > 0 && subnav) {
             const activeTab = subnav.find((s) => s.show === true);
 
             if (activeTab) {
@@ -81,25 +81,64 @@ function GenericIndex({ setting, userProfile }) {
                         <div className="grid">
                             {subnav && subnav.length > 0 ? (
                                 <div className="grid__subrow">
-                                    <div className="grid__subnav">
-                                        <TableFilter
-                                            filters={subnav}
-                                            setFilters={setSubnav}
-                                            setSettings={setConfig}
-                                        />
-                                    </div>
-                                    <div className="grid__subcontent">
-                                        <Table
-                                            {...config}
-                                            gridHeight={windowHeight * 0.65}
-                                            setConfig={setConfig}
-                                            setTotal={setTotal}
-                                            style={
-                                                userProfile?.settings?.style ||
-                                                {}
-                                            }
-                                        />
-                                    </div>
+                                    {layout === 'full' ? (
+                                        <>
+                                            <div className={`grid__subnav`}>
+                                                <TableFilter
+                                                    filters={subnav}
+                                                    setFilters={setSubnav}
+                                                    setSettings={setConfig}
+                                                    type={layout}
+                                                />
+                                            </div>
+                                            <div className={`grid__subcontent`}>
+                                                <Table
+                                                    {...config}
+                                                    gridHeight={
+                                                        windowHeight * 0.65
+                                                    }
+                                                    setConfig={setConfig}
+                                                    setTotal={setTotal}
+                                                    style={
+                                                        userProfile?.settings
+                                                            ?.style || {}
+                                                    }
+                                                />
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <div className="grid__full">
+                                            <div className="tabcontent">
+                                                <div
+                                                    className={`tabcontent__menu`}
+                                                >
+                                                    <TableFilter
+                                                        filters={subnav}
+                                                        setFilters={setSubnav}
+                                                        setSettings={setConfig}
+                                                        type={layout}
+                                                    />
+                                                </div>
+                                                <div
+                                                    className={`tabcontent__main`}
+                                                >
+                                                    <Table
+                                                        {...config}
+                                                        gridHeight={
+                                                            windowHeight * 0.65
+                                                        }
+                                                        setConfig={setConfig}
+                                                        setTotal={setTotal}
+                                                        style={
+                                                            userProfile
+                                                                ?.settings
+                                                                ?.style || {}
+                                                        }
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
                             ) : (
                                 <div className="grid__full">

package/index.js

@@ -27,7 +27,12 @@ import Profile from './components/crm/auth/Profile';
 import Reset from './components/crm/auth/Reset';
 import Verify from './components/crm/auth/Verify';
 
-/** Generic Components */
+/** CMS Generic Components */
+import CmsDetail from './components/cms/generic/CmsDetail';
+import CmsIndex from './components/cms/generic/CmsIndex';
+import CmsSort from './components/cms/generic/CmsSort';
+
+/** CRM Generic Components */
 import GenericDetail from './components/crm/generic/GenericDetail';
 import GenericIndex from './components/crm/generic/GenericIndex';
 import NotificationList from './components/crm/generic/NotificationList';
@@ -36,7 +41,10 @@ export {
     AsyncSelect,
     Autocomplete,
     Call,
+    CmsDetail,
     CmsForm,
+    CmsIndex,
+    CmsSort,
     CustomFetch,
     DataGrid,
     Download,

package/package.json

@@ -3,6 +3,7 @@
         "@inovua/reactdatagrid-community": "^5.10.2",
         "add": "^2.0.6",
         "akar-icons": "^1.9.28",
+        "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.4.0",
         "framer-motion": "^10.15.1",
@@ -41,7 +42,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "2.3.2",
+    "version": "2.3.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {