- Click on the Vite and React logos to learn more
-
-
- )
-}
-
-export default App
+
+
+ {/* Vista del dashboard */}
+ {activeMenu === 'dashboard' && (
+
+ )}
+
+ {/* Vista para crear o editar una orden */}
+ {activeMenu === 'createOrder' && (
+
+ )}
+
+ {/* Vista de la lista de órdenes */}
+ {activeMenu === 'orderList' && (
+
+ )}
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
new file mode 100644
index 0000000..48f0b6f
--- /dev/null
+++ b/src/components/Dashboard.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button, Col, Row } from 'antd';
+
+const Dashboard = ({ onCreateOrder, onViewOrders }) => {
+ return (
+
+
+
¡Bienvenidx!
+
+
+
+
+ );
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/src/components/OrderForm.css b/src/components/OrderForm.css
new file mode 100644
index 0000000..04fd607
--- /dev/null
+++ b/src/components/OrderForm.css
@@ -0,0 +1,45 @@
+/* Contenedor del formulario */
+.form-container {
+ background-color: #f9f9f9;
+ padding: 20px;
+ max-width: 600px;
+ margin: 0 auto;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Título del formulario */
+.form-title {
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+/* Estilo del formulario */
+.order-form {
+ max-width: 100%;
+ margin: 0 auto;
+}
+
+/* Estilo para los botones */
+.ant-btn {
+ font-size: 14px;
+ padding: 6px 12px;
+ border-radius: 4px;
+}
+
+/* Botón para el envio */
+.ant-btn-primary {
+ background-color: #1890ff;
+ border-color: #1890ff;
+ color: white;
+}
+
+.ant-btn-primary:hover {
+ background-color: #40a9ff;
+ border-color: #40a9ff;
+}
+
+/* Botón de "Volver al Dashboard" */
+.ant-btn-block {
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/components/OrderForm.jsx b/src/components/OrderForm.jsx
new file mode 100644
index 0000000..619b4ce
--- /dev/null
+++ b/src/components/OrderForm.jsx
@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, InputNumber, Radio, message, Divider, Typography, Row, Col } from 'antd';
+import './OrderForm.css';
+
+const { Title } = Typography;
+
+// Precios de los productos
+const prices = {
+ "Hamburguesa Sencilla": 50,
+ "Hamburguesa Doble": 85,
+ "Hotdog": 35,
+ "Papas a la francesa": 30,
+ "Refresco": 25,
+};
+
+const OrderForm = ({ createOrder, editOrder, order, redirectToDashboard }) => {
+ const [form] = Form.useForm();
+ const [quantities, setQuantities] = useState({
+ "Hamburguesa Sencilla": 0,
+ "Hamburguesa Doble": 0,
+ "Hotdog": 0,
+ "Papas a la francesa": 0,
+ "Refresco": 0,
+ });
+ const [total, setTotal] = useState(0);
+
+ // Efecto para cargar la orden cuando estamos editando
+ useEffect(() => {
+ if (order) {
+ const initialQuantities = { ...quantities };
+ order.items.forEach(item => {
+ initialQuantities[item.name] = item.quantity;
+ });
+ setQuantities(initialQuantities);
+ setTotal(order.total);
+
+ form.setFieldsValue({
+ customerName: order.customerName,
+ modality: order.modality,
+ });
+ }
+ }, [order, form]);
+
+ // Función para manejar el cambio en la cantidad de un producto
+ const onQuantityChange = (item, value) => {
+ const newQuantities = {
+ ...quantities,
+ [item]: value >= 0 ? value : 0, // Evita valores negativos
+ };
+ setQuantities(newQuantities);
+ };
+
+ // Efecto para recalcular el total cuando cambian las cantidades
+ useEffect(() => {
+ let newTotal = 0;
+ for (const item in quantities) {
+ newTotal += quantities[item] * prices[item];
+ }
+ setTotal(newTotal);
+ }, [quantities]);
+
+ const onFinish = (values) => {
+ if (!values.customerName || total === 0) {
+ message.error('Por favor, ingresa el nombre del cliente y selecciona al menos un producto.');
+ return;
+ }
+
+ const selectedItems = Object.keys(quantities).filter(item => quantities[item] > 0);
+
+ const orderData = {
+ id: order ? order.id : Date.now(),
+ customerName: values.customerName,
+ items: selectedItems.map(item => ({
+ name: item,
+ quantity: quantities[item],
+ price: prices[item],
+ })),
+ total,
+ modality: values.modality,
+ createdAt: order ? order.createdAt : new Date().toLocaleString(),
+ };
+
+ if (order) {
+ editOrder(orderData);
+ } else {
+ createOrder(orderData);
+ }
+
+ redirectToDashboard();
+ form.resetFields();
+ setQuantities({
+ "Hamburguesa Sencilla": 0,
+ "Hamburguesa Doble": 0,
+ "Hotdog": 0,
+ "Papas a la francesa": 0,
+ "Refresco": 0,
+ });
+ setTotal(0);
+ };
+
+ return (
+
+ {order ? "Editar Orden" : "Nueva Orden"}
+
+
+ {/* Botón para volver al Dashboard */}
+
+
+ );
+};
+
+export default OrderForm;
diff --git a/src/components/OrderList.css b/src/components/OrderList.css
new file mode 100644
index 0000000..b4cdac0
--- /dev/null
+++ b/src/components/OrderList.css
@@ -0,0 +1,19 @@
+.order-card {
+ border-radius: 8px;
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+ }
+
+ .order-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .order-title {
+ text-align: center;
+ font-weight: bold;
+ }
+
+ .total-text {
+ font-size: 18px;
+ color: #1890ff;
+ }
\ No newline at end of file
diff --git a/src/components/OrderList.jsx b/src/components/OrderList.jsx
new file mode 100644
index 0000000..87e892d
--- /dev/null
+++ b/src/components/OrderList.jsx
@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { Button, Collapse, List, Typography, Divider, Space, Popconfirm, Input } from 'antd';
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const { Title, Text } = Typography;
+const { Panel } = Collapse;
+
+const OrderList = ({ orders, showOrderDetails, deleteOrder, onBackToDashboard }) => {
+ const [searchTerm, setSearchTerm] = useState(''); // Estado para el término de búsqueda
+
+ // Filtrar órdenes según el nombre del cliente
+ const filteredOrders = orders.filter(order =>
+ order.customerName.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ return (
+
+ {/* Botón para volver al Dashboard */}
+
+
+ {/* Campo de búsqueda para filtrar por nombre de cliente */}
+ setSearchTerm(e.target.value)} // Actualiza el término de búsqueda
+ style={{ marginBottom: '20px', width: '300px' }}
+ />
+
+ {/* Título de la lista de órdenes */}
+
+ Historial de Órdenes
+
+
+ {/* Acordeón para mostrar cada orden */}
+
+ {filteredOrders.length > 0 ? (
+ filteredOrders.map((order, index) => (
+
+ {/* Modalidad de la orden */}
+ Modalidad: {order.modality === 'pickup' ? 'Pickup' : 'Delivery'}
+
+
+
+ {/* Lista de productos de la orden */}
+ (
+
+
+ Total: ${item.quantity * item.price}
+
+ )}
+ />
+
+
+
+ {/* Total de la orden */}
+ Total: ${order.total}
+
+ {/* Fechas de creación y actualización */}
+
+ Creada el: {new Date(order.createdAt).toLocaleString()}
+ {order.updatedAt !== order.createdAt && (
+
+ Actualizada el: {new Date(order.updatedAt).toLocaleString()}
+
+ )}
+
+
+
+ {/* Botones de acciones: Editar y Eliminar */}
+
+ {/* Botón para editar la orden */}
+
+
+ {/* Botón de eliminar orden */}
+ deleteOrder(order.id)} // Llama a la función deleteOrder con el ID de la orden
+ okText="Sí"
+ cancelText="No"
+ >
+ }
+ >
+ Eliminar
+
+
+
+
+ ))
+ ) : (
+ No se encontraron órdenes para ese cliente.
+ )}
+
+