Customer List

${customersHtml}

Name	Phone	Email	Address

`; try { const response = await fetch("/integrations/pdf-generation/pdf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ source: { html }, styles: [{ content: "body { padding: 20px; }" }] }) }); if (response.ok) { const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "customer_list.pdf"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } else { console.error("PDF generation failed"); } } catch (error) { console.error("Error generating PDF:", error); } }; return /* @__PURE__ */ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-semibold mb-4 text-gray-800" }, "Customer Dashboard"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-4 space-y-2 md:space-y-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex space-x-2" }, /* @__PURE__ */ React.createElement("button", { onClick: () => setIsAddingCustomer(true), className: "bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition duration-300" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-plus mr-2" }), "Add new"), /* @__PURE__ */ React.createElement("button", { onClick: handleExport, className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition duration-300" }, "Export")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement( "input", { type: "text", placeholder: "Search customers...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "border rounded p-2 mr-2" } ), /* @__PURE__ */ React.createElement("button", { onClick: () => onFilter(searchTerm), className: "bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition duration-300" }, "Filter"))), isAddingCustomer && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg p-6 w-full max-w-md" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-semibold mb-4" }, "Add New Customer"), /* @__PURE__ */ React.createElement("form", { onSubmit: handleAddCustomer }, /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { htmlFor: "firstName", className: "block font-medium text-gray-700" }, "First Name:"), /* @__PURE__ */ React.createElement( "input", { type: "text", id: "firstName", name: "firstName", value: newCustomer.firstName, onChange: handleInputChange, required: true, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { htmlFor: "lastName", className: "block font-medium text-gray-700" }, "Last Name:"), /* @__PURE__ */ React.createElement( "input", { type: "text", id: "lastName", name: "lastName", value: newCustomer.lastName, onChange: handleInputChange, required: true, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { htmlFor: "phoneNumber", className: "block font-medium text-gray-700" }, "Phone Number:"), /* @__PURE__ */ React.createElement( "input", { type: "tel", id: "phoneNumber", name: "phoneNumber", value: newCustomer.phoneNumber, onChange: handleInputChange, required: true, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { htmlFor: "email", className: "block font-medium text-gray-700" }, "Email Address:"), /* @__PURE__ */ React.createElement( "input", { type: "email", id: "email", name: "email", value: newCustomer.email, onChange: handleInputChange, required: true, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" } )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { htmlFor: "address", className: "block font-medium text-gray-700" }, "Physical Address:"), /* @__PURE__ */ React.createElement( "textarea", { id: "address", name: "address", value: newCustomer.address, onChange: handleInputChange, required: true, className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" } ))), /* @__PURE__ */ React.createElement("div", { className: "mt-6 flex justify-end space-x-3" }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setIsAddingCustomer(false), className: "bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded transition duration-300" }, "Cancel"), /* @__PURE__ */ React.createElement("button", { type: "submit", className: "bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition duration-300" }, "Add Customer"))))), /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React.createElement("table", { className: "w-full table-auto" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "bg-gray-200" }, /* @__PURE__ */ React.createElement("th", { className: "px-4 py-2 text-left" }, "Name"), /* @__PURE__ */ React.createElement("th", { className: "px-4 py-2 text-left" }, "Phone"), /* @__PURE__ */ React.createElement("th", { className: "px-4 py-2 text-left" }, "Email"), /* @__PURE__ */ React.createElement("th", { className: "px-4 py-2 text-left" }, "Address"))), /* @__PURE__ */ React.createElement("tbody", null, filteredCustomers.map((customer, index) => /* @__PURE__ */ React.createElement("tr", { key: index, className: index % 2 === 0 ? "bg-gray-100" : "bg-white" }, /* @__PURE__ */ React.createElement("td", { className: "px-4 py-2" }, `${customer.first_name} ${customer.last_name}`), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-2" }, customer.phone_number), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-2" }, customer.email), /* @__PURE__ */ React.createElement("td", { className: "px-4 py-2" }, customer.address))))))); } function StatusDisplay({ quantity, variant }) { const getColorClass = (quantity2) => { if (quantity2 >= 8) return "text-green-500"; if (quantity2 <= 4 && quantity2 > 0) return "text-yellow-500"; return "text-red-500"; }; const getBgColorClass = (quantity2) => { if (quantity2 >= 8) return "bg-green-100"; if (quantity2 <= 4 && quantity2 > 0) return "bg-yellow-100"; return "bg-red-100"; }; const getStatusText = (quantity2) => { if (quantity2 >= 8) return "In-stock"; if (quantity2 <= 4 && quantity2 > 0) return "Warning"; return "Out of stock"; }; const baseClasses = "inline-block px-4 py-2 text-base font-medium"; const variantClasses = { plain: "", withBackground: `${getBgColorClass(quantity)}`, withRoundedBackground: `${getBgColorClass(quantity)} rounded-lg` }; return /* @__PURE__ */ React.createElement("span", { className: `${baseClasses} ${variantClasses[variant]} ${getColorClass(quantity)}` }, getStatusText(quantity)); } function AdminPanelInterface({ employees, onAddEmployee, onUpdateAccess, onViewActivity }) { const [newEmployee, setNewEmployee] = React.useState({ name: "", email: "", access: [] }); const [selectedEmployee, setSelectedEmployee] = React.useState(null); const handleInputChange = (e) => { setNewEmployee({ ...newEmployee, [e.target.name]: e.target.value }); }; const handleAccessChange = (feature) => { const updatedAccess = newEmployee.access.includes(feature) ? newEmployee.access.filter((item) => item !== feature) : [...newEmployee.access, feature]; setNewEmployee({ ...newEmployee, access: updatedAccess }); }; const handleAddEmployee = () => { onAddEmployee(newEmployee); setNewEmployee({ name: "", email: "", access: [] }); }; const handleUpdateAccess = (employeeId, feature) => { onUpdateAccess(employeeId, feature); }; const handleViewActivity = (employeeId) => { onViewActivity(employeeId); }; const features = [ "settings", "inventory", "customer", "orders", "reports", "invoices" ]; return /* @__PURE__ */ React.createElement("div", { className: "bg-gray-100 min-h-screen p-4" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto" }, "Admin Panel"), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto" }, "Add New Employee"), /* @__PURE__ */ React.createElement( "input", { type: "text", name: "name", placeholder: "Name", value: newEmployee.name, onChange: handleInputChange, className: "w-full p-2 mb-2 border rounded" } ), /* @__PURE__ */ React.createElement( "input", { type: "email", name: "email", placeholder: "Email", value: newEmployee.email, onChange: handleInputChange, className: "w-full p-2 mb-2 border rounded" } ), /* @__PURE__ */ React.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React.createElement("h3", { className: "font-semibold mb-1 font-roboto" }, "Access:"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap" }, features.map((feature) => /* @__PURE__ */ React.createElement("label", { key: feature, className: "flex items-center mr-4 mb-1" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", checked: newEmployee.access.includes(feature), onChange: () => handleAccessChange(feature), className: "mr-2" } ), feature.charAt(0).toUpperCase() + feature.slice(1))))), /* @__PURE__ */ React.createElement( "button", { onClick: handleAddEmployee, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" }, "Add Employee" )), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow p-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto" }, "Manage Employees"), /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React.createElement("table", { className: "w-full" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "bg-gray-200" }, /* @__PURE__ */ React.createElement("th", { className: "p-2 text-left" }, "Name"), /* @__PURE__ */ React.createElement("th", { className: "p-2 text-left" }, "Email"), /* @__PURE__ */ React.createElement("th", { className: "p-2 text-left" }, "Access"), /* @__PURE__ */ React.createElement("th", { className: "p-2 text-left" }, "Actions"))), /* @__PURE__ */ React.createElement("tbody", null, employees.map((employee) => /* @__PURE__ */ React.createElement("tr", { key: employee.id, className: "border-b" }, /* @__PURE__ */ React.createElement("td", { className: "p-2" }, employee.name), /* @__PURE__ */ React.createElement("td", { className: "p-2" }, employee.email), /* @__PURE__ */ React.createElement("td", { className: "p-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap" }, features.map((feature) => /* @__PURE__ */ React.createElement( "label", { key: feature, className: "flex items-center mr-4 mb-1" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", checked: employee.access.includes(feature), onChange: () => handleUpdateAccess(employee.id, feature), className: "mr-2" } ), feature.charAt(0).toUpperCase() + feature.slice(1) )))), /* @__PURE__ */ React.createElement("td", { className: "p-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => handleViewActivity(employee.id), className: "bg-green-500 text-white px-2 py-1 rounded hover:bg-green-600 text-sm" }, "View Activity" ))))))))); } function LowStockNotificationsIcon({ onClick, lowStockNotification }) { const lowStockCount = lowStockNotification ? lowStockNotification.lowStockProducts.length : 0; const showButton = lowStockCount > 0; return /* @__PURE__ */ React.createElement( "button", { onClick, className: `bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 relative inline-block transition duration-300 ease-in-out transform hover:scale-105 ${showButton ? "" : "hidden"}` }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-bell text-white" }), showButton && /* @__PURE__ */ React.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center" }, lowStockCount) ); } function DashboardComponent({ salesActivity, inventorySummary, productDetails, topSellingVariants, purchaseOrder, salesOrder }) { return /* @__PURE__ */ React.createElement("div", { className: "p-6 bg-gray-100 min-h-screen" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement("input", { type: "text", placeholder: "Search", className: "pl-10 pr-4 py-2 border rounded-lg" }), /* @__PURE__ */ React.createElement("i", { className: "fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("span", { className: "mr-4" }, "Patricia Boyle"), /* @__PURE__ */ React.createElement("i", { className: "fas fa-user-circle text-2xl mr-2" }), /* @__PURE__ */ React.createElement("i", { className: "fas fa-bell text-2xl" }))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4 mb-6" }, /* @__PURE__ */ React.createElement(SalesActivityCard, { title: "Confirmed", value: salesActivity.confirmed, icon: "fas fa-check" }), /* @__PURE__ */ React.createElement(SalesActivityCard, { title: "To be shipped", value: salesActivity.toBeShipped, icon: "fas fa-truck" }), /* @__PURE__ */ React.createElement(SalesActivityCard, { title: "To be delivered", value: salesActivity.toBeDelivered, icon: "fas fa-box" }), /* @__PURE__ */ React.createElement(SalesActivityCard, { title: "To be invoiced", value: salesActivity.toBeInvoiced, icon: "fas fa-file-invoice-dollar" })), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4" }, "Inventory Summary"), /* @__PURE__ */ React.createElement("div", { className: "flex justify-between mb-2" }, /* @__PURE__ */ React.createElement("span", null, "Quantity in hand"), /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, inventorySummary.quantityInHand)), /* @__PURE__ */ React.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React.createElement("span", null, "Quantity to be received"), /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, inventorySummary.quantityToBeReceived))), /* @__PURE__ */ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4" }, "Product Details"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-red-500" }, "Low Stock Variants"), /* @__PURE__ */ React.createElement("p", { className: "font-bold" }, productDetails.lowStockVariants)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, "All Items"), /* @__PURE__ */ React.createElement("p", { className: "font-bold" }, productDetails.allItems)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, "Active Variants"), /* @__PURE__ */ React.createElement("p", { className: "font-bold" }, productDetails.activeVariants)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, "All Variants"), /* @__PURE__ */ React.createElement("p", { className: "font-bold" }, productDetails.allVariants))), /* @__PURE__ */ React.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React.createElement("div", { className: "bg-gray-200 h-2 rounded-full" }, /* @__PURE__ */ React.createElement("div", { className: "bg-green-500 h-2 rounded-full", style: { width: `${productDetails.activeVariants / productDetails.allVariants * 100}%` } }))))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold" }, "Top Selling Variants"), /* @__PURE__ */ React.createElement("select", { className: "border rounded p-1" }, /* @__PURE__ */ React.createElement("option", null, "This month"))), /* @__PURE__ */ React.createElement("div", { className: "flex justify-between" }, topSellingVariants.map((variant, index) => /* @__PURE__ */ React.createElement("div", { key: index, className: "text-center" }, /* @__PURE__ */ React.createElement("img", { src: variant.image, alt: variant.name, className: "w-24 h-24 object-cover mb-2" }), /* @__PURE__ */ React.createElement("p", { className: "font-semibold" }, variant.name), /* @__PURE__ */ React.createElement("p", null, variant.quantity, " Qty"))))), /* @__PURE__ */ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold" }, "Purchase Order"), /* @__PURE__ */ React.createElement("select", { className: "border rounded p-1" }, /* @__PURE__ */ React.createElement("option", null, "This month"))), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-2xl font-bold text-blue-600" }, purchaseOrder.qtyOrdered), /* @__PURE__ */ React.createElement("p", null, "Qty Ordered")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-2xl font-bold text-green-600" }, "$", purchaseOrder.totalCost ? purchaseOrder.totalCost.toFixed(2) : "0.00"), /* @__PURE__ */ React.createElement("p", null, "Total Cost")))), /* @__PURE__ */ React.createElement("div", { className: "mt-6 bg-white p-6 rounded-lg shadow-md" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold" }, "Sales Order"), /* @__PURE__ */ React.createElement("select", { className: "border rounded p-1" }, /* @__PURE__ */ React.createElement("option", null, "This month"))), /* @__PURE__ */ React.createElement("table", { className: "w-full" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "text-left" }, /* @__PURE__ */ React.createElement("th", null, "Channel"), /* @__PURE__ */ React.createElement("th", null, "Draft"), /* @__PURE__ */ React.createElement("th", null, "Confirmed"), /* @__PURE__ */ React.createElement("th", null, "Partially Shipped"), /* @__PURE__ */ React.createElement("th", null, "Shipped"), /* @__PURE__ */ React.createElement("th", null, "Delivered"))), /* @__PURE__ */ React.createElement("tbody", null, salesOrder.map((channel, index) => /* @__PURE__ */ React.createElement("tr", { key: index }, /* @__PURE__ */ React.createElement("td", null, channel.name), /* @__PURE__ */ React.createElement("td", null, channel.draft), /* @__PURE__ */ React.createElement("td", null, channel.confirmed), /* @__PURE__ */ React.createElement("td", null, channel.partially_shipped), /* @__PURE__ */ React.createElement("td", null, channel.shipped), /* @__PURE__ */ React.createElement("td", null, channel.delivered))))))); } function SalesActivityCard({ title, value, icon }) { return /* @__PURE__ */ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-blue-100 rounded-full p-3 mr-4" }, /* @__PURE__ */ React.createElement("i", { className: `${icon} text-blue-500` })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-2xl font-bold" }, value), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600" }, title))); } function SettingsDisplay({ setting, onSettingChange }) { const isToggle = setting.type === "toggle"; return /* @__PURE__ */ React.createElement("div", { key: setting.id, className: "mb-4 last:mb-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-700" }, setting.name), isToggle ? /* @__PURE__ */ React.createElement("div", { className: "relative inline-block w-12 h-6 transition duration-200 ease-in-out rounded-full cursor-pointer" }, /* @__PURE__ */ React.createElement( "input", { type: "checkbox", id: setting.id, name: setting.id, className: "absolute w-6 h-6 transition duration-200 ease-in-out transform bg-white border-4 rounded-full appearance-none cursor-pointer peer border-gray-300 checked:border-green-500 checked:translate-x-full", checked: setting.value, onChange: (e) => onSettingChange(setting.id, e.target.checked) } ), /* @__PURE__ */ React.createElement( "label", { htmlFor: setting.id, className: "block w-full h-full bg-gray-300 rounded-full peer-checked:bg-green-400" } )) : /* @__PURE__ */ React.createElement( "input", { type: "range", id: setting.id, name: setting.id, min: setting.min, max: setting.max, value: setting.value, onChange: (e) => onSettingChange(setting.id, parseInt(e.target.value)), className: "w-1/2" } )), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600" }, setting.description)); } function SettingsCard({ settings, onSettingChange, currency, onCurrencyChange, employees, onAddEmployee, onUpdateAccess, onViewActivity }) { return /* @__PURE__ */ React.createElement("div", { className: "w-full p-6 bg-gray-100" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-gray-800" }, "Inventory App Settings"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-gray-800" }, "Privacy and Security Settings"), /* @__PURE__ */ React.createElement( AdminPanelInterface, { employees, onAddEmployee, onUpdateAccess, onViewActivity } )), /* @__PURE__ */ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-gray-800" }, "Application Settings"), settings.map((setting) => /* @__PURE__ */ React.createElement(SettingsDisplay, { key: setting.id, setting, onSettingChange })), /* @__PURE__ */ React.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-700 mb-2" }, "Default Currency"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-4" }, ["USD", "ZAR"].map((curr) => /* @__PURE__ */ React.createElement("label", { key: curr, className: "flex items-center" }, /* @__PURE__ */ React.createElement( "input", { type: "radio", name: "currency", value: curr, checked: currency === curr, onChange: () => onCurrencyChange(curr), className: "mr-2" } ), curr))))))); } function OrderCard() { const [customers, setCustomers] = React.useState([]); const [products, setProducts] = React.useState([]); const [orders, setOrders] = React.useState([]); const [selectedCustomer, setSelectedCustomer] = React.useState(null); const [selectedProducts, setSelectedProducts] = React.useState([]); const [customerSearch, setCustomerSearch] = React.useState(""); const [productSearch, setProductSearch] = React.useState(""); React.useEffect(() => { fetchOrders(); }, []); const fetchOrders = async () => { try { const response = await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT * FROM `orders`" }) }); if (response.ok) { const data = await response.json(); setOrders(data); } else { console.error("Failed to fetch orders"); } } catch (error) { console.error("Error fetching orders:", error); } }; const searchCustomers = async (search) => { try { const response = await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT * FROM `customers` WHERE `first_name` LIKE ? OR `last_name` LIKE ? OR `email` LIKE ?", values: [`%${search}%`, `%${search}%`, `%${search}%`] }) }); if (response.ok) { const data = await response.json(); setCustomers(data); } else { console.error("Failed to search customers"); } } catch (error) { console.error("Error searching customers:", error); } }; const searchProducts = async (search) => { try { const response = await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT * FROM `inventory` WHERE `product_name` LIKE ?", values: [`%${search}%`] }) }); if (response.ok) { const data = await response.json(); setProducts(data); } else { console.error("Failed to search products"); } } catch (error) { console.error("Error searching products:", error); } }; const addProductToOrder = async (product) => { const stockResponse = await fetch("/api/stock-checker", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ productId: product.id }) }); const stockData = await stockResponse.json(); if (stockData.message === "success") { setSelectedProducts((prev) => [...prev, { ...product, orderQuantity: 1 }]); } else { alert("Product is out of stock"); } }; const updateProductQuantity = async (productId, newQuantity) => { const product = selectedProducts.find((p) => p.id === productId); if (!product) return; const stockResponse = await fetch("/api/stock-checker", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ productId }) }); const stockData = await stockResponse.json(); if (stockData.message === "success" && newQuantity > 0) { setSelectedProducts((prev) => prev.map( (p) => p.id === productId ? { ...p, orderQuantity: newQuantity } : p )); } else { alert("Cannot update quantity. Product is out of stock or quantity is invalid."); } }; const createOrder = async () => { if (!selectedCustomer || selectedProducts.length === 0) { alert("Please select a customer and at least one product"); return; } const total = selectedProducts.reduce((sum, p) => sum + p.price * p.orderQuantity, 0); try { const orderResponse = await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "INSERT INTO `orders` (`customer_id`, `total`, `status`) VALUES (?, ?, 'pending')", values: [selectedCustomer.id, total] }) }); if (orderResponse.ok) { const orderData = await orderResponse.json(); const orderId = orderData.insertId; for (const product of selectedProducts) { await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "INSERT INTO `order_items` (`order_id`, `product_id`, `quantity`, `price`) VALUES (?, ?, ?, ?)", values: [orderId, product.id, product.orderQuantity, product.price] }) }); await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "UPDATE `inventory` SET `quantity` = `quantity` - ? WHERE `id` = ?", values: [product.orderQuantity, product.id] }) }); } alert("Order created successfully"); setSelectedCustomer(null); setSelectedProducts([]); fetchOrders(); } else { console.error("Failed to create order"); } } catch (error) { console.error("Error creating order:", error); } }; const generateReceipt = async (order) => { try { const orderItemsResponse = await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT oi.*, i.product_name FROM `order_items` oi JOIN `inventory` i ON oi.product_id = i.id WHERE oi.order_id = ?", values: [order.id] }) }); const orderItems = await orderItemsResponse.json(); const customerResponse = await fetch("/api/db/datahub", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT * FROM `customers` WHERE id = ?", values: [order.customer_id] }) }); const customerData = await customerResponse.json(); const customer = customerData[0]; const receiptContent = `

Order Receipt

Order ID: ${order.id}

Customer: ${customer.first_name} ${customer.last_name}

Email: ${customer.email}

Phone: ${customer.phone_number}

Address: ${customer.address}

Order Items

${orderItems.map((item) => ` `).join("")}

Product	Quantity	Price	Total
${item.product_name}	${item.quantity}	$${item.price}	$${(item.quantity * item.price).toFixed(2)}

Total: $${order.total.toFixed(2)}

Status: ${order.status}

`; const response = await fetch("/integrations/pdf-generation/pdf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ source: { html: receiptContent }, styles: [{ content: "body { padding: 20px; }" }] }) }); if (response.ok) { const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = `order_receipt_${order.id}.pdf`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } else { console.error("Failed to generate receipt"); } } catch (error) { console.error("Error generating receipt:", error); } }; return /* @__PURE__ */ React.createElement("div", { className: "bg-gray-100 min-h-screen p-8" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-bold mb-8" }, "Order Management Dashboard"), /* @__PURE__ */ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 mb-8 w-full" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Create New Order"), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement( "input", { type: "text", placeholder: "Search customers...", value: customerSearch, onChange: (e) => { setCustomerSearch(e.target.value); searchCustomers(e.target.value); }, className: "w-full p-2 border rounded" } ), customers.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: "mt-2 border rounded" }, customers.map((customer) => /* @__PURE__ */ React.createElement( "li", { key: customer.id, className: "p-2 hover:bg-gray-100 cursor-pointer", onClick: () => setSelectedCustomer(customer) }, customer.first_name, " ", customer.last_name, " - ", customer.email )))), selectedCustomer && /* @__PURE__ */ React.createElement("div", { className: "mb-4 p-2 bg-blue-100 rounded" }, "Selected Customer: ", selectedCustomer.first_name, " ", selectedCustomer.last_name), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement( "input", { type: "text", placeholder: "Search products...", value: productSearch, onChange: (e) => { setProductSearch(e.target.value); searchProducts(e.target.value); }, className: "w-full p-2 border rounded" } ), products.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: "mt-2 border rounded" }, products.map((product) => /* @__PURE__ */ React.createElement( "li", { key: product.id, className: "p-2 hover:bg-gray-100 cursor-pointer", onClick: () => addProductToOrder(product) }, product.product_name, " - $", product.price, " (Stock: ", product.quantity, ")" )))), selectedProducts.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-semibold mb-2" }, "Selected Products:"), /* @__PURE__ */ React.createElement("ul", null, selectedProducts.map((product) => /* @__PURE__ */ React.createElement("li", { key: product.id, className: "flex items-center justify-between mb-2" }, /* @__PURE__ */ React.createElement("span", null, product.product_name, " - $", product.price), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { onClick: () => updateProductQuantity(product.id, product.orderQuantity - 1), className: "bg-red-500 text-white px-2 py-1 rounded mr-2" }, "-"), /* @__PURE__ */ React.createElement("span", null, product.orderQuantity), /* @__PURE__ */ React.createElement("button", { onClick: () => updateProductQuantity(product.id, product.orderQuantity + 1), className: "bg-green-500 text-white px-2 py-1 rounded ml-2" }, "+")))))), /* @__PURE__ */ React.createElement( "button", { onClick: createOrder, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300" }, "Create Order" )), /* @__PURE__ */ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Order List"), /* @__PURE__ */ React.createElement("table", { className: "w-full" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: "text-left p-2" }, "Order ID"), /* @__PURE__ */ React.createElement("th", { className: "text-left p-2" }, "Customer ID"), /* @__PURE__ */ React.createElement("th", { className: "text-left p-2" }, "Total"), /* @__PURE__ */ React.createElement("th", { className: "text-left p-2" }, "Status"), /* @__PURE__ */ React.createElement("th", { className: "text-left p-2" }, "Actions"))), /* @__PURE__ */ React.createElement("tbody", null, orders.map((order) => /* @__PURE__ */ React.createElement("tr", { key: order.id }, /* @__PURE__ */ React.createElement("td", { className: "p-2" }, order.id), /* @__PURE__ */ React.createElement("td", { className: "p-2" }, order.customer_id), /* @__PURE__ */ React.createElement("td", { className: "p-2" }, "$", order.total.toFixed(2)), /* @__PURE__ */ React.createElement("td", { className: "p-2" }, order.status), /* @__PURE__ */ React.createElement("td", { className: "p-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => generateReceipt(order), className: "bg-green-500 text-white px-2 py-1 rounded hover:bg-green-600 transition duration-300" }, "Generate Receipt" )))))))); } function InventoryCard() { const [products, setProducts] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(""); const [showForm, setShowForm] = React.useState(false); React.useEffect(() => { fetchProducts(); }, []); const fetchProducts = async () => { try { const response = await fetch("/api/db/datahub", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `inventory`" }) }); const data = await response.json(); setProducts(data); } catch (error) { console.error("Error fetching products:", error); } }; const handleAddProduct = async (e) => { e.preventDefault(); const formData = new FormData(e.target); const newProduct = Object.fromEntries(formData.entries()); try { const imageFile = formData.get("image"); const imageUrl = await uploadImage(imageFile); await fetch("/api/db/datahub", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `inventory` (product_name, item_no, image_url, category, quantity, price) VALUES (?, ?, ?, ?, ?, ?)", values: [newProduct.product_name, newProduct.item_no, imageUrl, newProduct.category, newProduct.quantity, newProduct.price] }) }); const notificationResponse = await fetch("/api/success-notification", { method: "POST", body: JSON.stringify({ submitted: true }) }); const notificationData = await notificationResponse.json(); alert(notificationData.message); fetchProducts(); setShowForm(false); } catch (error) { console.error("Error adding product:", error); } }; const uploadImage = async (file) => { return "https://via.placeholder.com/150"; }; const handleExport = async () => { const htmlContent = `

Inventory List

${products.map((product) => ` `).join("")}

Product Name	Item No.	Image	Category	Quantity	Price
${product.product_name}	${product.item_no}	$${product.product_name}$	${product.category}	${product.quantity}	$${parseFloat(product.price).toFixed(2)}

`; try { const response = await fetch("/integrations/pdf-generation/pdf", { method: "POST", body: JSON.stringify({ source: { html: htmlContent }, styles: [{ content: "body { padding: 20px; }" }] }) }); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "inventory_list.pdf"; a.click(); } catch (error) { console.error("Error exporting PDF:", error); } }; const filteredProducts = products.filter( (product) => product.product_name.toLowerCase().includes(searchTerm.toLowerCase()) || product.item_no.toLowerCase().includes(searchTerm.toLowerCase()) || product.category.toLowerCase().includes(searchTerm.toLowerCase()) ); return /* @__PURE__ */ React.createElement("div", { className: "w-full p-6 bg-[url('/path/to/dotted-background.png')] bg-repeat" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-bold mb-6" }, "Inventory Dashboard"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row justify-between mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "mb-2 md:mb-0" }, /* @__PURE__ */ React.createElement("button", { onClick: () => setShowForm(true), className: "bg-green-500 text-white px-4 py-2 rounded mr-2" }, "+ Add new"), /* @__PURE__ */ React.createElement("button", { onClick: handleExport, className: "bg-blue-500 text-white px-4 py-2 rounded" }, "Export")), /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement( "input", { name: "search", type: "text", placeholder: "Search inventory...", className: "border rounded px-2 py-1 mr-2 w-full md:w-auto", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) } ), /* @__PURE__ */ React.createElement("button", { className: "bg-gray-500 text-white px-4 py-2 rounded" }, "Filter"))), showForm && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-md" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-bold mb-4" }, "Add New Product"), /* @__PURE__ */ React.createElement("form", { onSubmit: handleAddProduct }, /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("input", { name: "product_name", type: "text", placeholder: "Product Name", required: true, className: "w-full border rounded px-2 py-1" }), /* @__PURE__ */ React.createElement("input", { name: "item_no", type: "text", placeholder: "Item No.", required: true, className: "w-full border rounded px-2 py-1" }), /* @__PURE__ */ React.createElement("input", { name: "image", type: "file", accept: ".png,.jpeg,.webp,.jpg", required: true, className: "w-full border rounded px-2 py-1" }), /* @__PURE__ */ React.createElement("input", { name: "category", type: "text", placeholder: "Category", required: true, className: "w-full border rounded px-2 py-1" }), /* @__PURE__ */ React.createElement("input", { name: "quantity", type: "number", placeholder: "Quantity", required: true, className: "w-full border rounded px-2 py-1" }), /* @__PURE__ */ React.createElement("input", { name: "price", type: "number", step: "0.01", placeholder: "Price", required: true, className: "w-full border rounded px-2 py-1" })), /* @__PURE__ */ React.createElement("div", { className: "mt-6 flex justify-end space-x-2" }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setShowForm(false), className: "bg-gray-300 text-gray-800 px-4 py-2 rounded" }, "Cancel"), /* @__PURE__ */ React.createElement("button", { type: "submit", className: "bg-green-500 text-white px-4 py-2 rounded" }, "Add Product"))))), /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React.createElement("table", { className: "w-full bg-white shadow-md rounded" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "bg-gray-200 text-gray-600 uppercase text-sm leading-normal" }, /* @__PURE__ */ React.createElement("th", { className: "py-3 px-6 text-left" }, "Product Name"), /* @__PURE__ */ React.createElement("th", { className: "py-3 px-6 text-left" }, "Item No."), /* @__PURE__ */ React.createElement("th", { className: "py-3 px-6 text-left" }, "Image"), /* @__PURE__ */ React.createElement("th", { className: "py-3 px-6 text-left" }, "Category"), /* @__PURE__ */ React.createElement("th", { className: "py-3 px-6 text-left" }, "Quantity"), /* @__PURE__ */ React.createElement("th", { className: "py-3 px-6 text-left" }, "Price"), /* @__PURE__ */ React.createElement("th", { className: "py-3 px-6 text-left" }, "Inventory Status"))), /* @__PURE__ */ React.createElement("tbody", { className: "text-gray-600 text-sm font-light" }, filteredProducts.map((product, index) => /* @__PURE__ */ React.createElement("tr", { key: index, className: "border-b border-gray-200 hover:bg-gray-100" }, /* @__PURE__ */ React.createElement("td", { className: "py-3 px-6 text-left whitespace-nowrap" }, product.product_name), /* @__PURE__ */ React.createElement("td", { className: "py-3 px-6 text-left" }, product.item_no), /* @__PURE__ */ React.createElement("td", { className: "py-3 px-6 text-left" }, /* @__PURE__ */ React.createElement("img", { src: product.image_url, alt: `Product image of ${product.product_name}`, className: "w-12 h-12 object-cover rounded" })), /* @__PURE__ */ React.createElement("td", { className: "py-3 px-6 text-left" }, product.category), /* @__PURE__ */ React.createElement("td", { className: "py-3 px-6 text-left" }, product.quantity), /* @__PURE__ */ React.createElement("td", { className: "py-3 px-6 text-left" }, "$", parseFloat(product.price).toFixed(2)), /* @__PURE__ */ React.createElement("td", { className: "py-3 px-6 text-left" }, /* @__PURE__ */ React.createElement(StatusDisplay, { quantity: parseInt(product.quantity), variant: "withRoundedBackground" })))))))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();