\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nfunction SecurityQuestionModal({\n onClose,\n onSuccess,\n actionType,\n}: {\n onClose: () => void;\n onSuccess: () => void;\n actionType: \"add\" | \"delete\";\n}) {\n const [answer, setAnswer] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (answer.trim() === \"2024\") {\n onSuccess();\n onClose();\n } else {\n setError(\"Incorrect answer. Please try again.\");\n }\n }\n\n return (\n \n \n

Security Question

When is Joalda founded?

\n setAnswer(e.target.value)}\n placeholder=\"Enter the founding year\"\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n />\n {error &&

{error}

}\n

\n \n Cancel\n \n \n Submit\n \n

\n \n \n \n );\n}\n\nfunction Footer() {\n return (\n \n \n

Joalda Fashion

\n Crafting style with cultural roots since 2024\n

Quick Links

\n \n

\n e.preventDefault()}\n style={{ color: COLORS.secondary, textDecoration: \"none\" }}\n >\n Home\n \n

\n e.preventDefault()}\n style={{ color: COLORS.secondary, textDecoration: \"none\" }}\n >\n Cart\n \n

\n e.preventDefault()}\n style={{ color: COLORS.secondary, textDecoration: \"none\" }}\n >\n Add Product\n \n

\n \n

Contact Us

\n Email: support@joalda.com\n

\n Phone: +1 (555) 123-4567\n

\n \n \n © {new Date().getFullYear()} Joalda Fashion. All rights reserved.\n \n \n );\n}\n\nfunction App() {\n const [view, setView] = useState<\"home\" | \"cart\" | \"add-product\" | \"product-detail\">(\"home\");\n const [products, setProducts] = useState([]);\n const [cart, setCart] = useState([]);\n const [selectedProduct, setSelectedProduct] = useState(null);\n const [filter, setFilter] = useState<{\n category?: \"cultural\" | \"standard\";\n minPrice?: number;\n inStock?: boolean;\n }>({});\n const [showSecurityModal, setShowSecurityModal] = useState(false);\n const [pendingAction, setPendingAction] = useState<\n {\n type: \"add\" | \"delete\";\n data?: Product | number;\n } | null\n >(null);\n\n useEffect(() => {\n fetchProducts();\n }, []);\n\n async function fetchProducts() {\n const response = await fetch(\"/products\");\n const data = await response.json();\n setProducts(data);\n }\n\n async function deleteProduct(productId: number) {\n setPendingAction({ type: \"delete\", data: productId });\n setShowSecurityModal(true);\n }\n\n function addToCart(product: Product) {\n setCart([...cart, product]);\n }\n\n function processPendingAction() {\n if (!pendingAction) return;\n\n if (pendingAction.type === \"delete\") {\n const productId = pendingAction.data as number;\n fetch(`/delete-product/${productId}`, { method: \"DELETE\" })\n .then(async (response) => {\n if (response.ok) {\n await fetchProducts();\n setView(\"home\");\n alert(\"Product deleted successfully!\");\n }\n });\n } else if (pendingAction.type === \"add\") {\n const product = pendingAction.data as Product;\n fetch(\"/add-product\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(product),\n }).then((response) => {\n if (response.ok) {\n alert(\"Product added successfully!\");\n fetchProducts();\n setView(\"home\");\n }\n });\n }\n\n setPendingAction(null);\n }\n\n function AddProductForm() {\n const [newProduct, setNewProduct] = useState({\n name: \"\",\n description: \"\",\n price: 0,\n category: \"standard\",\n imageUrl: \"\",\n stockQuantity: 0,\n });\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n setPendingAction({ type: \"add\", data: newProduct });\n setShowSecurityModal(true);\n }\n\n return (\n \n \n

Add New Product

\n Name:\n setNewProduct({ ...newProduct, name: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"5px\" }}\n />\n

\n Description:\n setNewProduct({ ...newProduct, description: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"5px\" }}\n />\n

\n Price:\n setNewProduct({ ...newProduct, price: Number(e.target.value) })}\n required\n style={{ width: \"100%\", padding: \"5px\" }}\n />\n

\n Category:\n setNewProduct({ ...newProduct, category: e.target.value as any })}\n style={{ width: \"100%\", padding: \"5px\" }}\n >\n \n \n \n

\n Image URL:\n setNewProduct({ ...newProduct, imageUrl: e.target.value })}\n required\n style={{ width: \"100%\", padding: \"5px\" }}\n />\n

\n Stock Quantity:\n setNewProduct({ ...newProduct, stockQuantity: Number(e.target.value) })}\n required\n style={{ width: \"100%\", padding: \"5px\" }}\n />\n

\n \n add_circle\n Add Product\n \n \n \n );\n }\n\n function renderContent() {\n switch (view) {\n case \"home\":\n return (\n

Joalda Fashion

\n setFilter({ ...filter, category: e.target.value as any })}\n style={{ marginRight: \"10px\", padding: \"5px\" }}\n >\n \n \n \n \n setFilter({ ...filter, minPrice: Number(e.target.value) })}\n style={{ marginRight: \"10px\", padding: \"5px\" }}\n />\n \n setFilter({ ...filter, inStock: e.target.checked })}\n />\n In Stock\n \n

\n \n {products\n .filter(p =>\n (!filter.category || p.category === filter.category)\n && (!filter.minPrice || p.price >= filter.minPrice)\n && (filter.inStock === undefined || (filter.inStock ? p.stockQuantity > 0 : true))\n )\n .map(product => (\n \n \n

{product.name}

₦{product.price.toFixed(2)}

\n {\n setSelectedProduct(product);\n setView(\"product-detail\");\n }}\n style={{\n backgroundColor: COLORS.accent,\n color: \"white\",\n border: \"none\",\n padding: \"10px\",\n borderRadius: \"5px\",\n marginRight: \"10px\",\n }}\n >\n View Details\n \n

\n ))}\n \n \n );\n case \"cart\":\n return (\n

Your Cart

\n {cart.map(product => (\n

\n \n

{product.name}

₦{product.price.toFixed(2)}

\n ))}\n alert(\"Checkout complete!\")}\n style={{\n backgroundColor: COLORS.secondary,\n color: \"white\",\n border: \"none\",\n padding: \"10px\",\n borderRadius: \"5px\",\n }}\n >\n Checkout\n \n

\n );\n case \"add-product\":\n return ;\n case \"product-detail\":\n return selectedProduct\n ? (\n \n \n

{selectedProduct.name}

{selectedProduct.description}

Price: ₦{selectedProduct.price.toFixed(2)}

Category: {selectedProduct.category}

Stock: {selectedProduct.stockQuantity}

\n addToCart(selectedProduct)}\n style={{\n backgroundColor: COLORS.accent,\n color: \"white\",\n border: \"none\",\n padding: \"10px\",\n borderRadius: \"5px\",\n }}\n >\n Add to Cart\n \n deleteProduct(selectedProduct.id!)}\n style={{\n backgroundColor: COLORS.danger,\n color: \"white\",\n border: \"none\",\n padding: \"10px\",\n borderRadius: \"5px\",\n }}\n >\n Delete Product\n \n

\n \n )\n : null;\n }\n }\n\n return (\n

\n \n \n \n \n \n

\n {renderContent()}\n

\n {showSecurityModal && (\n {\n setShowSecurityModal(false);\n setPendingAction(null);\n }}\n onSuccess={() => {\n processPendingAction();\n }}\n actionType={pendingAction?.type || \"add\"}\n />\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }","deleted","label","children",[],[157],{"_105":175,"_96":176,"_158":177,"_159":-5,"_160":143,"_161":178,"_162":119,"_107":179,"_101":32,"_165":180,"_167":73,"_169":22,"_170":-5,"_171":181,"_99":182},"342f6072-43b2-11f0-9901-76b3cceeab13","new-file-8405.tsx","342f6130-43b2-11f0-9901-76b3cceeab13",11,["D",1749309310709],"script",[],[176],{"_105":184,"_96":100,"_158":185,"_159":-5,"_160":143,"_161":102,"_162":22,"_107":186,"_101":187,"_165":188,"_167":73,"_169":22,"_170":-5,"_171":189,"_99":190},"77a56b1c-43b2-11f0-a499-76b3cceeab13","358d299a-43b2-11f0-940d-76b3cceeab13",["D",1749309423897],1,"email",[],[100],"files",[155,174,183],"counts",{"_195":32,"_196":187,"_197":32,"_198":199,"_202":203},"pulls","branches","forks","envVars",{"_200":32,"_201":32},"count","emptyCount","connections",{"_200":32,"_204":32},"unfilledCount","contents",[],"file",{"_105":184,"_96":100,"_158":185,"_159":-5,"_160":143,"_161":102,"_162":22,"_107":209,"_101":187,"_165":188,"_167":73,"_169":22,"_170":-5,"_99":210},["D",1749309423897],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":219,"_153":224,"_191":234,"_207":235,"_205":237,"_238":-5,"_239":-5,"_240":-5,"_241":-5,"_242":243,"_198":-5},{"_105":106,"_96":97,"_107":220,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":122,"_123":32,"_16":124,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":221,"_137":222,"_140":223,"_152":22},["D",1746205484537],{"_94":95,"_135":136},{"_94":95,"_139":136,"_14":115},{"_101":142,"_96":44,"_105":143,"_144":106,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":97,"_151":95},[225,228,231],{"_105":156,"_96":157,"_158":117,"_159":-5,"_160":143,"_161":122,"_162":119,"_107":163,"_101":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":226,"_99":227},[],[157],{"_105":175,"_96":176,"_158":177,"_159":-5,"_160":143,"_161":178,"_162":119,"_107":179,"_101":32,"_165":180,"_167":73,"_169":22,"_170":-5,"_171":229,"_99":230},[],[176],{"_105":184,"_96":100,"_158":185,"_159":-5,"_160":143,"_161":102,"_162":22,"_107":186,"_101":187,"_165":188,"_167":73,"_169":22,"_170":-5,"_171":232,"_99":233},[],[100],[225,228,231],{"_105":184,"_96":100,"_158":185,"_159":-5,"_160":143,"_161":102,"_162":22,"_107":209,"_101":187,"_165":188,"_167":73,"_169":22,"_170":-5,"_99":236},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

GideonEsq

Joalda_couture