\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}\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\n

\n setFilter({ ...filter, category: e.target.value as any })}\n style={{ marginRight: \"10px\", padding: \"5px\" }}\n >\n \n \n \n \n\n setFilter({ ...filter, minPrice: Number(e.target.value) })}\n style={{ marginRight: \"10px\", padding: \"5px\" }}\n />\n\n \n setFilter({ ...filter, inStock: e.target.checked })}\n />\n In Stock\n \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\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\n case \"add-product\":\n return ;\n\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\n return (\n

\n \n {/* Brand Name as Logo */}\n setView(\"home\")}\n style={{\n cursor: \"pointer\",\n fontSize: \"24px\",\n fontWeight: 600,\n fontFamily: \"'Raleway', 'Garamond', serif\",\n display: \"flex\",\n alignItems: \"center\",\n transition: \"color 0.3s ease\",\n }}\n onMouseEnter={(e) => (e.currentTarget.style.color = COLORS.secondary)}\n onMouseLeave={(e) => (e.currentTarget.style.color = \"white\")}\n >\n \n store\n \n Joalda Fashion\n

\n\n {/* Navigation Items */}\n \n setView(\"cart\")}\n style={{\n background: \"none\",\n border: \"none\",\n color: view === \"cart\" ? COLORS.secondary : \"white\",\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"16px\",\n fontFamily: \"'Raleway', 'Garamond', serif\",\n transition: \"color 0.3s ease\",\n }}\n onMouseEnter={(e) => (e.currentTarget.style.color = COLORS.secondary)}\n onMouseLeave={(e) =>\n (e.currentTarget.style.color = view === \"cart\" ? COLORS.secondary : \"white\")\n }\n >\n \n shopping_cart\n \n Cart ({cart.length})\n \n\n setView(\"add-product\")}\n style={{\n background: \"none\",\n border: \"none\",\n color: view === \"add-product\" ? COLORS.secondary : \"white\",\n cursor: \"pointer\",\n display: \"flex\",\n alignItems: \"center\",\n fontSize: \"16px\",\n fontFamily: \"'Raleway', 'Garamond', serif\",\n transition: \"color 0.3s ease\",\n }}\n onMouseEnter={(e) => (e.currentTarget.style.color = COLORS.secondary)}\n onMouseLeave={(e) =>\n (e.currentTarget.style.color = view === \"add-product\" ? COLORS.secondary : \"white\")\n }\n >\n \n add_circle\n \n Add Product\n \n \n \n {renderContent()}\n {showSecurityModal && (\n {\n setShowSecurityModal(false);\n setPendingAction(null);\n }}\n onSuccess={() => {\n processPendingAction();\n }}\n actionType={pendingAction?.type || \"add\"}\n />\n )}\n