@gnar-engine/cli 1.0.2 → 1.0.4

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/slices/authSlice.js

@@ -1,71 +0,0 @@
-import {createSlice, createAsyncThunk, createAction} from '@reduxjs/toolkit';
-import { getAuthToken, getAuthUser, setAuthToken, setAuthUser, removeAuthToken, removeAuthUser } from '@gnar-engine/js-client/src/storage';
-import gnarEngine from '@gnar-engine/js-client';
-
-
-export const login = createAsyncThunk('auth/login', async ({username, password}) => {
-
-    let response;
-
-    try {
-        response = await gnarEngine.user.authenticate(username, password);;
-    } catch (error) {
-        response = error.response;
-    }
-
-    return response;
-})
-
-export const logout = createAction('auth/logout');
-
-export const authSlice = createSlice({
-    name: 'auth',
-    initialState: {
-        authUser: getAuthUser() ? JSON.parse(getAuthUser()) : null,
-        accessToken: getAuthToken() ? getAuthToken() : '',
-        authLoading: false,
-        authError: ''
-    },
-    reducers: {
-    },
-    extraReducers: builder => {
-        builder
-            .addCase(login.pending, (state, action) => {
-                state.authLoading = true;
-                state.authError = '';
-            })
-            .addCase(login.fulfilled, (state, action) => {
-                state.authLoading = false;
-                state.authError = action.payload.data?.error ? action.payload.data.message : '';
-
-                if (action.payload.token) {
-                    state.accessToken = action.payload.token;
-                    state.authUser = action.payload.user;
-
-                    // store in local storage
-                    setAuthToken(action.payload.token);
-                    setAuthUser(JSON.stringify(action.payload.user));
-
-                    // redirect to portal
-                    window.location.href= '/portal';
-                } else {
-                    // Handle error case
-                    console.error('Login failed:', action.payload);
-                }
-            })
-            .addCase(logout, (state, action) => {
-                // Clear auth state
-                state.authUser = '';
-                state.accessToken = '';
-
-                // Remove from local storage
-                removeAuthToken();
-                removeAuthUser();
-
-                // Redirect to login page
-                window.location.href = '/login';
-            });
-    }
-})
-
-export default authSlice;

package/bootstrap/services/portal/src/store/configureStore.js

@@ -1,12 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-import authSlice from '../slices/authSlice';
-
-
-const store = configureStore({
-    
-    reducer: {
-        auth: authSlice.reducer
-    }
-})
-
-export default store;

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

@@ -1,159 +0,0 @@
-
-/* vars */
-
-@green-1: #479E78;
-@dark-grey-1: #434343;
-@mid-grey-1: #73768C;
-@orange-1: #E8896D;
-@orange-2: #EFA12C;
-@dark-1: #3C5063;
-@grey-light-1: #F6F8F9;
-@grey-mid-1: #E4E4E4;
-@grey-dark-1: #B3B3B3;
-@white: #FFFFFF;
-@red-1: #c73939;
-@red-2: #ffeeee;
-@green-2: #359E59;
-
-@content-width: 1550px;
-
-/* Fonts */
-
-// @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-body {
-    font-family: ubuntu, sans-serif;
-    color: @dark-1;
-    font-size: 14px;
-}
-
-/* Global styles */
-
-h1 {
-    margin-top: 0px;
-    font-size: 28px;
-    font-weight: 600;
-}
-h2 {
-    font-size: 15px;
-    font-weight: 500;
-}
-body {
-    margin: 0px;
-
-    &, #root {
-        min-height: 100vh;
-    }
-}
-
-.separator {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    height: 0px;
-    border-top: 1px solid @grey-mid-1;
-}
-.content-wrap {
-    display: flex;
-    justify-content: center;
-}
-.content {
-    width: 100%;
-    max-width: @content-width;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 20px;
-    padding-right: 20px;
-}
-.instruction {
-    font-size: 12px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-.flex-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 20px;
-}
-.flex-row-end{
-    align-items: flex-end;
-}
-.form-cont {
-    width: 100%;
-    margin-bottom: 30px;
-}
-
-.full-width-select-cont,
-.full-width-select-cont .custom-select {
-    min-width: 100%;
-}
-.flex-row-select-cont {
-    min-width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 20px;
-
-    .custom-select {
-        width: 100%;
-        max-width: unset;
-    }
-}
-
-.flex-row-checkbox-cont {
-    min-width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 20px;
-
-    label {
-        display: inline-block;
-    }
-}
-
-.flex-row-buttons-cont {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    gap: 20px;
-}
-
-.button {
-    &.button-loading {
-        background: @grey-mid-1 !important;
-        cursor: not-allowed !important;
-
-        &:disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
-    }
-}
-
-.card {
-    background: @white;
-    border: 1px solid @grey-mid-1;
-    border-radius: 10px;
-    margin-top: 20px;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-
-    .card-header {
-        width: 100%;
-        background-color: @dark-grey-1;
-        color: @white;
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-        display: flex;
-        justify-content: space-between;
-        
-        h2 {
-            padding: 20px;
-            margin: 0px;
-        }
-    }
-
-    .card-content {
-        padding: 20px;
-    }
-}