@gnar-engine/cli 1.0.0 → 1.0.1

package/bootstrap/services/portal/src/pages/contacts/Contacts.jsx

@@ -0,0 +1,199 @@
+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 CrudContactSingle from "../../features/crudContact/CrudContactSingle";
+import CrudContactList from "../../features/crudContact/CrudContactList";
+
+const Contacts = () => {
+
+    const [view, setView] = useState(null);
+    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
+    const [selectedContact, setContact] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [selectedAction, setSelectedAction] = useState(null);
+    const [selectedContactIds, setSelectedContactIds] = useState(new Set());
+    const [contacts, setContacts] = useState([]);
+    const [message, setMessage] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const fetchContacts = async () => {
+        try {
+            const data = await gnarEngine.contacts.getMany();
+            console.log('data:', data);
+
+            const contactsList = data.contacts.map(contact => ({
+                id: contact._id,
+                firstName: contact.firstName,
+                lastName: contact.lastName,
+                email: contact.email,
+                phone: contact.phone,
+                dateOfBirth: contact.dateOfBirth,
+                createdAt: formatDate(contact.createdAt),
+            }));
+
+            setContacts(contactsList);
+            setMessage(contactsList.length > 0 ? '' : 'No contacts found');
+        } catch (error) {
+            console.error('Error fetching contacts:', error);
+            setContacts([]);
+        }
+    };
+
+    useEffect(() => {
+        fetchContacts();
+    }, []);
+
+    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);
+        setContact(null);
+    }
+
+    const refreshSelectedContact = () => {
+        if (!selectedSingleItemId) {
+            return;
+        }
+        (async () => {
+            try {
+                const data = await gnarEngine.contacts.getContact(selectedSingleItemId);
+                setContact(data.contact);
+            } catch (error) {
+                console.error('Error fetching contact:', error);
+            }
+        })();
+    }
+
+    useEffect(() => {
+        (async () => {
+            if (!selectedSingleItemId) {
+                return;
+            }
+            try {
+                // fetch contact data
+                const data = await gnarEngine.contacts.getContact(selectedSingleItemId);
+                setContact(data.contact);
+
+            } catch (error) {
+                console.error('Error fetching contact:', 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 (selectedContactIds.size === 0) {
+            alert("Please select a contact to delete first!");
+            return;
+        }
+        if (!window.confirm(`Are you sure you want to delete ${selectedContactIds.size} contact(s)?`)) {
+            return;
+        }
+        (async () => {
+            try {
+                for (const contactId of selectedContactIds) {
+                    await gnarEngine.contacts.delete(contactId);
+                }
+                setSelectedContactIds(new Set());
+                setSelectedAction(null);
+                await fetchContacts();
+            } catch (error) {
+                console.error('Error deleting contact:', 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>
+                        <CrudContactList 
+                            setSelectedSingleItemId={setSelectedSingleItemId} 
+                            setView={() => setView('single')}
+                            selectedContactIds={selectedContactIds}
+                            setSelectedContactIds={setSelectedContactIds}
+                            contacts={contacts}
+                            message={message}
+                        />
+                    </div>
+                ) : (
+                    <CrudContactSingle 
+                        loading={loading} 
+                        setLoading={setLoading} 
+                        contact={selectedContact} 
+                        setView={() => setView('list')} 
+                        refreshSelectedContact={refreshSelectedContact} 
+                        setContact={setContact}
+                        fetchContacts={fetchContacts}
+                        formatDate={formatDate}
+                        setSelectedSingleItemId={setSelectedSingleItemId}
+                    />
+                )}
+            </div>
+        </CrudLayout>
+    );
+}
+
+export default Contacts;

package/bootstrap/services/portal/src/pages/dashboard/Dashboard.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Dashboard = () => {
+
+    return (
+        <div className="dashboard">
+            <h1>Dashboard</h1>
+
+            <div className="separator"></div>
+
+            <p>Please use the relevant links within the side bar to view, update and track your data.</p>
+
+        </div>
+    );
+}
+
+export default Dashboard;

package/bootstrap/services/portal/src/pages/integrations/Integrations.jsx

@@ -0,0 +1,10 @@
+const Integrations = () => {
+
+    return (
+        <div>
+            <h1>Integrations Page</h1>
+        </div>
+    );
+}
+
+export default Integrations;

package/bootstrap/services/portal/src/pages/login/Login.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import LoginLayout from "../../layouts/LoginLayout";
+import LoginForm from "../../features/loginForm/LoginForm";
+
+const LoginPage = () => {
+    return (
+        <LoginLayout>
+
+            <LoginForm />
+
+        </LoginLayout>
+    );
+}
+
+export default LoginPage;

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

@@ -0,0 +1,10 @@
+.login-layout {
+
+    h1 {
+        margin-bottom: 10px;
+    }
+    h2 {
+        margin-top: 0px;
+        margin-bottom: 10px;
+    }
+}

package/bootstrap/services/portal/src/pages/orders/Orders.jsx

@@ -0,0 +1,199 @@
+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 CrudOrderList from "../../features/crudOrder/CrudOrderList";
+import CrudOrderSingle from "../../features/crudOrder/CrudOrderSingle";
+
+const Orders = () => {
+
+    const [view, setView] = useState("list");
+    const [selectedSingleItemId, setSelectedSingleItemId] = useState(null);
+    const [selectedOrder, setOrder] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [selectedAction, setSelectedAction] = useState(null);
+    const [selectedOrderIds, setSelectedOrderIds] = useState(new Set());
+    const [orders, setOrders] = useState([]);
+    const [message, setMessage] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const fetchOrders = async () => {
+        try {
+            const data = await gnarEngine.order.getOrders();
+            console.log('data:', data);
+
+            const ordersList = data.orders.map(order => ({
+                id: order._id,
+                type: order.type,
+                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),
+            }));
+
+            setOrders(ordersList);
+            setMessage(ordersList.length > 0 ? '' : 'No orders found');
+        } catch (error) {
+            console.error('Error fetching orders:', error);
+            setOrders([]);
+        }
+    }
+
+    useEffect(() => {
+        fetchOrders();
+    }, []);
+
+    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);
+        setOrder(null);
+    }
+
+    const refreshSelectedOrder = () => {
+        if (!selectedSingleItemId) {
+            return;
+        }
+        (async () => {
+            try {
+                const data = await gnarEngine.order.getOrder(selectedSingleItemId);
+                setOrder(data.order);
+            } catch (error) {
+                console.error('Error fetching orders:', error);
+            }
+        })();
+    }
+
+    useEffect(() => {
+        (async () => {
+            if (!selectedSingleItemId) {
+                return;
+            }
+            try {
+                // fetch contact data
+                const data = await gnarEngine.order.getOrder(selectedSingleItemId);
+                setOrder(data.order);
+
+            } catch (error) {
+                console.error('Error fetching order:', 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 (selectedOrderIds.size === 0) {
+            alert("Please select an order to delete first!");
+            return;
+        }
+        if (!window.confirm(`Are you sure you want to delete ${selectedOrderIds.size} order(s)?`)) {
+            return;
+        }
+        (async () => {
+            try {
+                for (const orderId of selectedOrderIds) {
+                    await gnarEngine.order.deleteOrder(orderId);
+                }
+                setSelectedOrderIds(new Set());
+                setSelectedAction(null);
+                await fetchOrders();
+            } catch (error) {
+                console.error('Error deleting order:', 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>
+                        <CrudOrderList 
+                            setSelectedSingleItemId={setSelectedSingleItemId} 
+                            setView={() => setView('single')}
+                            selectedOrderIds={selectedOrderIds}
+                            setSelectedOrderIds={setSelectedOrderIds}
+                            orders={orders}
+                            message={message} 
+                        />
+                    </div>
+                ) : (
+                    <CrudOrderSingle 
+                        loading={loading} 
+                        setLoading={setLoading} 
+                        order={selectedOrder} 
+                        setView={() => setView('list')} 
+                        refreshSelectedOrder={refreshSelectedOrder} 
+                        setOrder={setOrder}
+                        fetchOrders={fetchOrders}
+                        formatDate={formatDate}
+                        setSelectedSingleItemId={setSelectedSingleItemId}
+                    />
+                )}
+            </div>
+        </CrudLayout>
+    );
+}
+
+export default Orders;

package/bootstrap/services/portal/src/pages/passwordReset/PasswordResetPage.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import LoginLayout from "../../layouts/LoginLayout";
+import PasswordResetForm from "../../features/passwordReset/PasswordResetForm";
+
+const PasswordResetPage = () => {
+    return (
+        <LoginLayout>
+
+            <PasswordResetForm />
+
+        </LoginLayout>
+    );
+}
+
+export default PasswordResetPage;

package/bootstrap/services/portal/src/pages/passwordResetRequest/PasswordResetRequestPage.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import LoginLayout from "../../layouts/LoginLayout";
+import PasswordResetRequestForm from "../../features/passwordReset/PasswordResetRequestForm";
+
+const PasswordResetRequestPage = () => {
+    return (
+        <LoginLayout>
+
+            <PasswordResetRequestForm />
+
+        </LoginLayout>
+    );
+}
+
+export default PasswordResetRequestPage;

package/bootstrap/services/portal/src/pages/payments/Payments.jsx

@@ -0,0 +1,10 @@
+const Payments = () => {
+
+    return (
+        <div>
+            <h1>Payments Page</h1>
+        </div>
+    );
+}
+
+export default Payments;

package/bootstrap/services/portal/src/pages/portal/Portal.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Routes, Route, Outlet } from 'react-router-dom';
+import PortalLayout from "../../layouts/PortalLayout";
+import Dashboard from "../dashboard/Dashboard";
+import Products from "../products/Products";
+import Reports from "../reports/Reports";
+import Orders from "../orders/Orders";
+import Integrations from "../integrations/Integrations";
+import Contacts from "../contacts/Contacts";
+import Payments from "../payments/Payments";
+import Settings from "../settings/Settings";
+import Users from "../users/Users";
+import Subscriptions from "../subscriptions/Subscriptions";
+import RaffleEntries from "../raffleEntries/RaffleEntries";
+import Raffles from "../raffles/Raffles";
+
+
+const Portal = () => {
+
+    return (
+        <PortalLayout>
+            
+            <Routes>
+                <Route path="/" element={<Dashboard />} />
+                <Route path="/products" element={<Products />} />
+                <Route path="/orders" element={<Orders />} />
+                <Route path="/subscriptions" element={<Subscriptions />} />
+                <Route path="/integrations" element={<Integrations />} />
+                <Route path="/raffles" element={<Raffles />} />
+                <Route path="/raffle-entries" element={<RaffleEntries />} />
+                <Route path="/contacts" element={<Contacts />} />
+                <Route path="/payments" element={<Payments />} />
+                <Route path="/users" element={<Users />} />
+                <Route path="/reports" element={<Reports />} />
+                <Route path="/settings" element={<Settings />} />
+            </Routes>
+
+            <Outlet />
+        </PortalLayout>
+    );
+}
+
+export default Portal;