@gnar-engine/cli 1.0.3 → 1.0.5

package/bootstrap/services/portal/src/pages/subscriptions/Subscriptions.jsx

@@ -1,199 +0,0 @@
-import React, { useState, useEffect } from "react";
-import CrudLayout from "../../layouts/CrudLayout";
-import gnarEngine from "@gnar-engine/js-client";
-import CustomSelect from "../../ui/customSelect/CustomSelect";
-import arrow from '../../assets/arrow.svg';
-import CrudSubscriptionList from "../../features/crudSubscription/CrudSubscriptionList";
-import CrudSubscriptionSingle from "../../features/crudSubscription/CrudSubscriptionSingle";
-
-const Subscriptions = () => {
-
-    const [view, setView] = useState("list");
-    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
-    const [selectedSubscription, setSubscription] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [selectedAction, setSelectedAction] = useState(null);
-    const [selectedSubscriptionIds, setSelectedSubscriptionIds] = useState(new Set());
-    const [subscriptions, setSubscriptions] = useState([]);
-    const [message, setMessage] = useState('');
-    const [currentPage, setCurrentPage] = useState(1);
-
-
-    const fetchSubscriptions = async () => {
-        try {
-            const data = await gnarEngine.subscription.getSubscriptions();
-            console.log('data:', data);
-
-            const subscriptionsList = data.subscriptions.map(order => ({
-                id: order._id,
-                firstName: order.billingAddress.firstName,
-                lastName: order.billingAddress.lastName,
-                date: new Date(order.createdAt).toLocaleDateString(),
-                status: order.status,
-                total: '£' + order.total?.toFixed(2),
-                createdAt: formatDate(order.createdAt),
-            }));
-
-            setSubscriptions(subscriptionsList);
-            setMessage(subscriptionsList.length > 0 ? '' : 'No subscriptions found');
-        } catch (error) {
-            console.error('Error fetching subscriptions:', error);
-            setSubscriptions([]);
-        }
-    }
-
-    useEffect(() => {
-        fetchSubscriptions();
-    }, []);
-
-    const formatDate = (isoString) => {
-        if (!isoString) return "N/A";
-    
-        const date = new Date(isoString);
-        if (isNaN(date.getTime())) return "N/A"; // Checks if the date is invalid
-    
-        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} at ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
-    };
-    
-
-    const handleAddNew = () => {
-        setView("single");
-        setSelectedSingleItemId(null);
-        setSubscription(null);
-    }
-
-    const refreshSelectedSubscription = () => {
-        if (!selectedSingleItemId) {
-            return;
-        }
-        (async () => {
-            try {
-                const data = await gnarEngine.subscription.getSubscriptions(selectedSingleItemId);
-                setSubscription(data.subscription);
-            } catch (error) {
-                console.error('Error fetching subscription:', error);
-            }
-        })();
-    }
-
-    useEffect(() => {
-        (async () => {
-            if (!selectedSingleItemId) {
-                return;
-            }
-            try {
-                // fetch contact data
-                const data = await gnarEngine.subscription.getSubscription(selectedSingleItemId);
-                setSubscription(data.subscription);
-
-            } catch (error) {
-                console.error('Error fetching subscription:', error);
-            }
-        })();
-    }, [selectedSingleItemId]);
-
-    const handleAction = () => {
-        if (!selectedAction) {
-            alert("Please select an action first!");
-            return;
-        }
-    
-        if (selectedAction.id === "delete") {
-            handleDelete();
-        } else if (selectedAction.id === "export") {
-            console.log("Export action triggered");
-        }
-    };
-
-    const handleDelete = () => {
-        if (selectedSubscriptionIds.size === 0) {
-            alert("Please select a subscription to delete first!");
-            return;
-        }
-        if (!window.confirm(`Are you sure you want to delete ${selectedSubscriptionIds.size} subscription(s)?`)) {
-            return;
-        }
-        (async () => {
-            try {
-                for (const subscriptionId of selectedSubscriptionIds) {
-                    await gnarEngine.subscription.deleteSubscription(subscriptionId);
-                }
-                setSelectedSubscriptionIds(new Set());
-                setSelectedAction(null);
-                await fetchSubscriptions();
-            } catch (error) {
-                console.error('Error deleting subscription:', error);
-            }
-        })();
-    };
-
-    return (
-        <CrudLayout
-            view={view}
-            setView={setView}
-            selectedSingleItemId={selectedSingleItemId}
-            setSelectedSingleItemId={setSelectedSingleItemId}    
-        >
-            <div className="crud-page">
-
-                {view === "list" ? (
-                    <div className="crud-list-cont">
-                        <div className="crud-list-controls">
-                            <div className="controls-left-col">
-                                <button onClick={handleAddNew} className="add-new">Add new</button>
-                            </div>
-                            <div className="controls-right-col">
-                                <CustomSelect
-                                    name="filter-contacts"
-                                    placeholder="filter by"
-                                    options={[
-                                        { id: "all", name: "All" },
-                                        { id: "admin", name: "Admin" },
-                                        { id: "contact", name: "User" }
-                                    ]}
-                                    labelKey="name"
-                                    setSelectedOption={() => {}}
-                                    selectedOption={null}
-                                />
-                                <CustomSelect 
-                                    name="action"
-                                    placeholder="action"
-                                    options={[
-                                        { id: "delete", name: "Delete" },
-                                        // { id: "export", name: "Export" }
-                                    ]}
-                                    labelKey="name"
-                                    setSelectedOption={setSelectedAction}
-                                    selectedOption={selectedAction}
-                                />
-                                <button className="arrowButton" onClick={handleAction}><img src={arrow} alt="right arrow icon" /></button>
-                            </div>
-                        </div>
-                        <CrudSubscriptionList 
-                            setSelectedSingleItemId={setSelectedSingleItemId} 
-                            setView={() => setView('single')}
-                            selectedSubscriptionIds={selectedSubscriptionIds}
-                            setSelectedSubscriptionIds={setSelectedSubscriptionIds}
-                            subscriptions={subscriptions}
-                            message={message} 
-                        />
-                    </div>
-                ) : (
-                    <CrudSubscriptionSingle 
-                        loading={loading} 
-                        setLoading={setLoading} 
-                        subscription={selectedSubscription} 
-                        setView={() => setView('list')} 
-                        refreshSelectedSubscription={refreshSelectedSubscription} 
-                        setSubscription={setSubscription}
-                        fetchSubscriptions={fetchSubscriptions}
-                        setSelectedSingleItemId={setSelectedSingleItemId}
-                        formatDate={formatDate}
-                    />
-                )}
-            </div>
-        </CrudLayout>
-    );
-}
-
-export default Subscriptions;

package/bootstrap/services/portal/src/pages/users/Users.jsx

@@ -1,193 +0,0 @@
-import React, { useState, useEffect } from "react";
-import CrudLayout from "../../layouts/CrudLayout";
-import CrudUserList from '../../features/crudUser/CrudUserList';
-import CrudUserSingle from '../../features/crudUser/CrudUserSingle';
-import gnarEngine from "@gnar-engine/js-client";
-import CustomSelect from "../../ui/customSelect/CustomSelect";
-import arrow from '../../assets/arrow.svg';
-
-const ManageUsers = () => {
-
-    const [view, setView] = useState("list");
-    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
-    const [selectedUser, setUser] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [selectedAction, setSelectedAction] = useState(null);
-    const [selectedUserIds, setSelectedUserIds] = useState(new Set());
-    const [users, setUsers] = useState([]);
-    const [message, setMessage] = useState('');
-    const [currentPage, setCurrentPage] = useState(1);
-
-    const fetchUsers = async () => {
-        try {
-            const data = await gnarEngine.user.getMany();
-            const usersList = data.users.map(user => ({
-                id: user.id,
-                email: user.email,
-                username: user.username,
-                userRole: user.role,
-                createdAt: formatDate(user.createdAt),
-            }));
-            setUsers(usersList);
-            setMessage(usersList.length > 0 ? '' : 'No users found');
-        } catch (error) {
-            console.error('Error fetching users:', error);
-            setMessage('Error fetching users');
-            setUsers([]);
-        }
-    };
-
-    
-    useEffect(() => {
-        fetchUsers();
-    }, []);
-
-
-    const formatDate = (isoString) => {
-        if (!isoString) return "N/A";
-    
-        const date = new Date(isoString);
-        if (isNaN(date.getTime())) return "N/A"; // Checks if the date is invalid
-    
-        return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} at ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
-    };
-    
-
-    const handleAddNew = () => {
-        setView("single");
-        setSelectedSingleItemId(null);
-        setUser(null);
-    }
-
-    const refreshSelectedUser = (user) => {
-        setUser(user);
-    }
-
-    useEffect(() => {
-        (async () => {
-            if (!selectedSingleItemId) {
-                return;
-            }
-            try {
-                // fetch user data
-                const data = await gnarEngine.user.getUser(selectedSingleItemId);
-                setUser(data.user);
-
-            } catch (error) {
-                console.error('Error fetching user:', error);
-            }
-        })();
-    }, [selectedSingleItemId]);
-
-
-    const handleAction = () => {
-        if (!selectedAction) {
-            alert("Please select an action first!");
-            return;
-        }
-    
-        if (selectedAction.id === "delete") {
-            handleDelete();
-        } else if (selectedAction.id === "export") {
-            console.log("Export action triggered");
-        }
-    };
-    
-
-    const handleDelete = () => {
-        if (selectedUserIds.size === 0) {
-            alert("Please select at least one user to delete.");
-            return;
-        }
-    
-        if (!window.confirm(`Are you sure you want to delete ${selectedUserIds.size} user(s)?`)) {
-            return;
-        }
-    
-        (async () => {
-            try {
-                setLoading(true);
-                for (let userId of selectedUserIds) {
-                    await gnarEngine.user.delete(userId);
-                }
-                setSelectedUserIds(new Set()); 
-                setLoading(false);
-                await fetchUsers();
-            } catch (error) {
-                console.error('Error deleting users:', error);
-                setLoading(false);
-            }
-        })();
-    };
-    
-
-    return (
-        <CrudLayout
-            view={view}
-            setView={setView}
-            selectedSingleItemId={selectedSingleItemId}
-            setSelectedSingleItemId={setSelectedSingleItemId}    
-        >
-            <div className="crud-page">
-
-                {view === "list" ? (
-                    <div className="crud-list-cont">
-                        <div className="crud-list-controls">
-                            <div className="controls-left-col">
-                                <button onClick={handleAddNew} className="add-new">Add new</button>
-                            </div>
-                            <div className="controls-right-col">
-                                <CustomSelect
-                                    name="filter-users"
-                                    placeholder="filter by"
-                                    options={[
-                                        { id: "all", name: "All" },
-                                        { id: "admin", name: "Admin" },
-                                        { id: "user", name: "User" }
-                                    ]}
-                                    labelKey="name"
-                                    setSelectedOption={() => {}}
-                                    selectedOption={null}
-                                />
-                                <CustomSelect 
-                                    name="action"
-                                    placeholder="action"
-                                    options={[
-                                        { id: "delete", name: "Delete" },
-                                        // { id: "export", name: "Export" }
-                                    ]}
-                                    labelKey="name"
-                                    setSelectedOption={setSelectedAction}
-                                    selectedOption={selectedAction}
-                                />
-                                <button className="arrowButton" onClick={handleAction}><img src={arrow} alt="right arrow icon" /></button>
-                            </div>
-                        </div>
-                        <CrudUserList 
-                            setSelectedSingleItemId={setSelectedSingleItemId} 
-                            setView={() => setView('single')}
-                            selectedUserIds={selectedUserIds}
-                            setSelectedUserIds={setSelectedUserIds}
-                            users={users}
-                            message={message}
-                        />
-                    </div>
-                ) : (
-                    <CrudUserSingle 
-                        loading={loading} 
-                        setLoading={setLoading} 
-                        selectedUser={selectedUser} 
-                        setView={() => setView('list')} 
-                        refreshSelectedUser={refreshSelectedUser} 
-                        setUser={setUser}
-                        fetchUsers={fetchUsers}
-                        formatDate={formatDate}
-                        setSelectedSingleItemId={setSelectedSingleItemId}
-                    />
-                )}
-            </div>
-        </CrudLayout>
-    );
-}
-
-export default ManageUsers;

package/bootstrap/services/portal/src/pages/users/users.less

@@ -1,25 +0,0 @@
-.crud-page {
-    .crud-list-cont {
-        .crud-list-header {
-            text-align: right;
-        }
-
-        .crud-list-controls {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-
-            .controls-left-col {
-                display: flex;
-                gap: 20px;
-            }
-
-            .controls-right-col {
-                display: flex;
-                gap: 20px;
-            }
-        }
-
-    }
-}

package/bootstrap/services/portal/src/styles/inputs.less

@@ -1,157 +0,0 @@
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="number"] {
-    width: 100%;
-    padding: 6px 10px;
-    margin: 10px 0;
-    border: 1px solid @grey-mid-1;
-    background: @white;
-    border-radius: 25px;
-    box-sizing: border-box;
-    font-size: 14px;
-    color: @dark-1;
-}
-input:focus {
-    outline: none;
-    border: 1px solid @green-1;
-}
-textarea {
-    font-family: 'Roboto', sans-serif;
-    width: 100%;
-    padding: 10px;
-    margin: 10px 0;
-    border: 1px solid @grey-mid-1;
-    background: @white;
-    border-radius: 4px;
-    box-sizing: border-box;
-    font-size: 14px;
-    color: @dark-1;
-}
-
-button,
-.mainButton {
-    padding: 6px 10px;
-    margin: 10px 0;
-    border: none;
-    background: @green-1;
-    color: @white;
-    border-radius: 25px;
-    font-size: 14px;
-    cursor: pointer;
-    transition-duration: 0.4s;
-    width: 150px;
-    border: 1px solid @green-1;
-    text-decoration: none;
-    max-height: 40px;
-
-    &.wide {
-        width: 215px
-    }
-}
-button:hover,
-.mainButton:hover {
-    opacity: 0.9;
-    cursor: pointer;
-}
-.secondaryButton {
-    padding: 6px 10px;
-    margin: 10px 0;
-    border: none;
-    background: @dark-grey-1;
-    color: @white;
-    border-radius: 25px;
-    font-size: 14px;
-    cursor: pointer;
-    transition-duration: 0.4s;
-    width: 150px;
-    border: 1px solid @dark-grey-1;
-    text-decoration: none;
-    max-height: 40px;
-
-    &.wide {
-        width: 215px
-    }
-}
-.secondaryButton:hover {
-    opacity: 0.9;
-    cursor: pointer;
-}
-.button-cont {
-    width: 100%;
-    display: inline-block;
-
-    &.right {
-        text-align: right;
-    }
-}
-.arrowButton {
-    width: 30px;
-    height: 30px;
-    background: @green-1;
-    color: @white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-}
-button.bin-icon {
-    background: none;
-    border: none;
-    width: 30px;
-    height: 30px;
-    
-    &.white {
-        padding-right: 50px;
-    }
-}
-.pdfButton {
-    display: inline-block;
-    text-align: center;
-    line-height: 1.2em;
-    box-sizing: border-box;
-}
-
-button.success::after {
-    content: '✔'; 
-    color: @dark-1;
-    margin-left: 8px;
-    font-size: 14px;
-}
-
-button.error::after {
-    content: '✘'; 
-    color: @red-1;
-    margin-left: 8px; 
-    font-size: 16px;
-}
-
-button.grey-btn {
-    color: @green-1;
-    border: 1px solid @grey-mid-1;
-    background: @grey-light-1;
-}
-
-.date-selector-cont {
-    width: 100%;
-    display: inline-block;
-}
-.react-datepicker-wrapper {
-    width: 300px;
-    margin-bottom: 10px;
-
-    .react-datepicker__input-container {
-        width: 100%;
-    }
-}
-.text-button {
-    background: none;
-    border: none;
-    color: @green-1;
-    padding: 0px;
-    width: auto !important;
-
-    &:hover {
-        cursor: pointer;
-        opacity: 0.8;
-    }
-}

package/bootstrap/services/portal/src/styles/main.less

@@ -1,26 +0,0 @@
-
-// GLOBAL
-@import "global.less";
-@import "inputs.less";
-
-// LAYOUTS
-@import "../layouts/loginLayout.less";
-@import "../layouts/portalLayout.less";
-
-// PAGES
-@import "../pages/login/login.less";
-@import "../pages/users/users.less";
-
-// FEATURES
-@import "../features/loginForm/loginForm.less";
-@import "../features/sidebar/sidebar.less";
-@import "../features/user/user.less";
-@import "../features/crud/crudList.less";
-@import "../features/crud/crudEdit.less";
-@import "../features/crud/crudPage.less";
-@import "../features/priceFormRow/priceFormRow.less";
-
-// COMPONENTS
-@import "../ui/collapsible/collapsible.less";
-@import "../ui/customCheckbox/customCheckbox.less";
-@import "../ui/customSelect/customSelect.less";

package/bootstrap/services/portal/src/ui/collapsible/Collapsible.jsx

@@ -1,97 +0,0 @@
-import React, {useEffect, useState, useRef} from "react";
-
-
-export default function Collapsible({children, title, open, classNames}) {
-
-    const [isOpen, setIsOpen] = useState(open);
-    const [contentHeight, setContentHeight] = useState("0px");
-    const collapsibleContentInner = useRef(null);
-
-    classNames += " collapsible";
-
-    function handleCollapsibleToggle() {
-        setIsOpen(!isOpen);
-    }
-
-    const handleSetContentHeight = () => {
-
-        if (!collapsibleContentInner.current) {
-            return;
-        }
-
-        const content = collapsibleContentInner.current;
-        const newContentHeight = content.scrollHeight + "px";
-
-        if (isOpen) {
-            setContentHeight(newContentHeight);
-        }
-        else {
-            setContentHeight("0px");
-        }
-        
-    }
-
-    const preSetContentHeight = () => {
-
-        if (!collapsibleContentInner.current) {
-            return;
-        }
-
-        const content = collapsibleContentInner.current;
-        const newContentHeight = content.scrollHeight + "px";
-
-        setContentHeight(newContentHeight);
-    }
-
-    const unsetMaxHeight = () => {
-        setContentHeight("none");
-    }
-
-    // handle toggle
-    useEffect(() => {
-
-        // closing
-        if (!isOpen) {
-            preSetContentHeight();
-        }
-
-        // opening
-        if (isOpen) {
-            handleSetContentHeight();
-            setTimeout(() => {
-                unsetMaxHeight();
-            }, (300));    
-        }
-
-    }, [isOpen]);
-
-    // handle content height change
-    useEffect(() => {
-
-        if (!isOpen) {
-            setTimeout(() => {
-                handleSetContentHeight();
-            }, (0));    
-        }
-        
-    }, [contentHeight]);
-
-    useEffect(() => {
-        handleSetContentHeight();
-    }, []);
-
-
-    return (
-        <div className={`collapsible-cont ${classNames}`}>
-            <div className={`collapsible-header ${isOpen ? "open" : ""}`} onClick={handleCollapsibleToggle}>
-                <h3>{title}</h3>
-                <span>{isOpen ? "-" : "+"}</span>
-            </div>
-            <div className={`collapsible-content ${isOpen ? "collapsible-content-open" : ""}`} style={{ maxHeight: contentHeight }}>
-                <div className="collapsible-content-inner" ref={collapsibleContentInner}>
-                    {children}
-                </div>
-            </div>
-        </div>
-    );
-}