Add tooltips and cancellation confirmation for orders: Enhanced localization by adding tooltips for viewing details and canceling orders across multiple languages. Implemented cancellation confirmation messages to improve user experience when canceling orders.

src/App.js

@@ -107,9 +107,13 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (location.hash && location.hash.startsWith("#ORD-")) {
+    if (location.hash && location.hash.length > 1) {
-      if (location.pathname !== "/profile") {
+      // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
-        navigate(`/profile${location.hash}`, { replace: true });
+      const potentialOrderId = location.hash.substring(1);
+      if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
+        if (location.pathname !== "/profile") {
+          navigate(`/profile${location.hash}`, { replace: true });
+        }
       }
     }
   }, [location, navigate]);

src/components/profile/OrderDetailsDialog.js

@@ -26,14 +26,25 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
 
   const currencyFormatter = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });
 
+  // Helper function to translate payment methods
+  const getPaymentMethodDisplay = (paymentMethod) => {
+    if (!paymentMethod) return t('orders.details.notSpecified');
+    
+    switch (paymentMethod.toLowerCase()) {
+      case 'wire':
+        return t('payment.methods.bankTransfer');
+      default:
+        return paymentMethod;
+    }
+  };
+
   const handleCancelOrder = () => {
     // Implement order cancellation logic here
     console.log(`Cancel order: ${order.orderId}`);
     onClose(); // Close the dialog after action
   };
   
-  const subtotal = order.items.reduce((acc, item) => acc + item.price * item.quantity_ordered, 0);
+  const total = order.items.reduce((acc, item) => acc + item.price * item.quantity_ordered, 0);
-  const total = subtotal + order.delivery_cost;
 
   // Calculate VAT breakdown similar to CartDropdown
   const vatCalculations = order.items.reduce((acc, item) => {
@@ -83,7 +94,7 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
             </Box>
             <Box>
               <Typography variant="body2" color="text.secondary">{t('orders.details.paymentMethod')}</Typography>
-              <Typography variant="body1">{order.paymentMethod || order.payment_method || t('orders.details.notSpecified')}</Typography>
+              <Typography variant="body1">{getPaymentMethodDisplay(order.paymentMethod || order.payment_method)}</Typography>
             </Box>
           </Box>
         </Box>
@@ -96,6 +107,7 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
                 <TableCell>{t('orders.details.item')}</TableCell>
                 <TableCell align="right">{t('orders.details.quantity')}</TableCell>
                 <TableCell align="right">{t('orders.details.price')}</TableCell>
+                <TableCell align="right">{t('product.vatShort')}</TableCell>
                 <TableCell align="right">{t('orders.details.total')}</TableCell>
               </TableRow>
             </TableHead>
@@ -105,12 +117,12 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
                   <TableCell>{item.name}</TableCell>
                   <TableCell align="right">{item.quantity_ordered}</TableCell>
                   <TableCell align="right">{currencyFormatter.format(item.price)}</TableCell>
+                  <TableCell align="right">{item.vat}%</TableCell>
                   <TableCell align="right">{currencyFormatter.format(item.price * item.quantity_ordered)}</TableCell>
                 </TableRow>
               ))}
               <TableRow>
-                <TableCell colSpan={2} />
+                <TableCell colSpan={4} align="right">
-                <TableCell align="right">
                   <Typography fontWeight="bold">{t ? t('tax.totalNet') : 'Gesamtnettopreis'}</Typography>
                 </TableCell>
                 <TableCell align="right">
@@ -119,35 +131,18 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
               </TableRow>
               {vatCalculations.vat7 > 0 && (
                 <TableRow>
-                  <TableCell colSpan={2} />
+                  <TableCell colSpan={4} align="right">{t ? t('tax.vat7') : '7% Mehrwertsteuer'}</TableCell>
-                  <TableCell align="right">{t ? t('tax.vat7') : '7% Mehrwertsteuer'}</TableCell>
                   <TableCell align="right">{currencyFormatter.format(vatCalculations.vat7)}</TableCell>
                 </TableRow>
               )}
               {vatCalculations.vat19 > 0 && (
                 <TableRow>
-                  <TableCell colSpan={2} />
+                  <TableCell colSpan={4} align="right">{t ? t('tax.vat19') : '19% Mehrwertsteuer'}</TableCell>
-                  <TableCell align="right">{t ? t('tax.vat19') : '19% Mehrwertsteuer'}</TableCell>
                   <TableCell align="right">{currencyFormatter.format(vatCalculations.vat19)}</TableCell>
                 </TableRow>
               )}
               <TableRow>
-                <TableCell colSpan={2} />
+                <TableCell colSpan={4} align="right">
-                <TableCell align="right">
-                  <Typography fontWeight="bold">{t ? t('tax.subtotal') : 'Zwischensumme'}</Typography>
-                </TableCell>
-                <TableCell align="right">
-                  <Typography fontWeight="bold">{currencyFormatter.format(subtotal)}</Typography>
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell colSpan={2} />
-                <TableCell align="right">{t ? t('cart.summary.shippingCosts') : 'Lieferkosten'}</TableCell>
-                <TableCell align="right">{currencyFormatter.format(order.delivery_cost)}</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell colSpan={2} />
-                <TableCell align="right">
                   <Typography fontWeight="bold">{t ? t('cart.summary.total') : 'Gesamtsumme'}</Typography>
                 </TableCell>
                 <TableCell align="right">

src/components/profile/OrdersTab.js

@@ -15,8 +15,14 @@ import {
   Tooltip,
   CircularProgress,
   Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import CancelIcon from "@mui/icons-material/Cancel";
 import SocketContext from "../../contexts/SocketContext.js";
 import OrderDetailsDialog from "./OrderDetailsDialog.js";
 
@@ -71,6 +77,9 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
   const [error, setError] = useState(null);
   const [selectedOrder, setSelectedOrder] = useState(null);
   const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false);
+  const [cancelConfirmOpen, setCancelConfirmOpen] = useState(false);
+  const [orderToCancel, setOrderToCancel] = useState(null);
+  const [isCancelling, setIsCancelling] = useState(false);
 
   const {socket} = useContext(SocketContext);
   const navigate = useNavigate();
@@ -81,9 +90,11 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
       if (orderToView) {
         setSelectedOrder(orderToView);
         setIsDetailsDialogOpen(true);
+        // Update the hash to include the order ID
+        navigate(`/profile#${orderId}`, { replace: true });
       }
     },
-    [orders]
+    [orders, navigate]
   );
 
   const fetchOrders = useCallback(() => {
@@ -138,7 +149,48 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
   const handleCloseDetailsDialog = () => {
     setIsDetailsDialogOpen(false);
     setSelectedOrder(null);
-    navigate("/profile", { replace: true });
+    navigate("/profile#orders", { replace: true });
+  };
+
+  // Check if order can be cancelled
+  const isOrderCancelable = (order) => {
+    const cancelableStatuses = ['new', 'pending', 'processing'];
+    return cancelableStatuses.includes(order.status);
+  };
+
+  // Handle cancel button click
+  const handleCancelClick = (order) => {
+    setOrderToCancel(order);
+    setCancelConfirmOpen(true);
+  };
+
+  // Handle cancel confirmation
+  const handleConfirmCancel = () => {
+    if (!orderToCancel || !socket) return;
+    
+    setIsCancelling(true);
+    socket.emit('cancelOrder', { orderId: orderToCancel.orderId }, (response) => {
+      setIsCancelling(false);
+      setCancelConfirmOpen(false);
+      
+      if (response.success) {
+        console.log('Order cancelled:', response.orderId);
+        // Refresh orders list
+        fetchOrders();
+      } else {
+        setError(response.error || 'Failed to cancel order');
+      }
+      
+      setOrderToCancel(null);
+    });
+  };
+
+  // Handle cancel dialog close
+  const handleCancelDialogClose = () => {
+    if (!isCancelling) {
+      setCancelConfirmOpen(false);
+      setOrderToCancel(null);
+    }
   };
 
   if (loading) {
@@ -175,11 +227,10 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
             <TableBody>
               {orders.map((order) => {
                 const displayStatus = getStatusDisplay(order.status);
-                const subtotal = order.items.reduce(
+                const total = order.items.reduce(
                   (acc, item) => acc + item.price * item.quantity_ordered,
                   0
                 );
-                const total = subtotal + order.delivery_cost;
                 return (
                   <TableRow key={order.orderId} hover>
                     <TableCell>{order.orderId}</TableCell>
@@ -217,15 +268,28 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
                       {currencyFormatter.format(total)}
                     </TableCell>
                     <TableCell align="center">
-                      <Tooltip title="Details anzeigen">
+                      <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
-                        <IconButton
+                        <Tooltip title={t ? t('orders.tooltips.viewDetails') : 'Details anzeigen'}>
-                          size="small"
+                          <IconButton
-                          color="primary"
+                            size="small"
-                          onClick={() => handleViewDetails(order.orderId)}
+                            color="primary"
-                        >
+                            onClick={() => handleViewDetails(order.orderId)}
-                          <SearchIcon />
+                          >
-                        </IconButton>
+                            <SearchIcon />
-                      </Tooltip>
+                          </IconButton>
+                        </Tooltip>
+                        {isOrderCancelable(order) && (
+                          <Tooltip title={t ? t('orders.tooltips.cancelOrder') : 'Bestellung stornieren'}>
+                            <IconButton
+                              size="small"
+                              color="error"
+                              onClick={() => handleCancelClick(order)}
+                            >
+                              <CancelIcon />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                      </Box>
                     </TableCell>
                   </TableRow>
                 );
@@ -243,6 +307,47 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
         onClose={handleCloseDetailsDialog}
         order={selectedOrder}
       />
+      
+      {/* Cancel Confirmation Dialog */}
+      <Dialog
+        open={cancelConfirmOpen}
+        onClose={handleCancelDialogClose}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle>
+          {t ? t('orders.cancelConfirm.title') : 'Bestellung stornieren'}
+        </DialogTitle>
+        <DialogContent>
+          <Typography>
+            {t ? t('orders.cancelConfirm.message') : 'Sind Sie sicher, dass Sie diese Bestellung stornieren möchten?'}
+          </Typography>
+          {orderToCancel && (
+            <Typography variant="body2" sx={{ mt: 1, fontWeight: 'bold' }}>
+              {t ? t('orders.table.orderNumber') : 'Bestellnummer'}: {orderToCancel.orderId}
+            </Typography>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button 
+            onClick={handleCancelDialogClose}
+            disabled={isCancelling}
+          >
+            {t ? t('common.cancel') : 'Abbrechen'}
+          </Button>
+          <Button 
+            onClick={handleConfirmCancel}
+            color="error"
+            variant="contained"
+            disabled={isCancelling}
+          >
+            {isCancelling 
+              ? (t ? t('orders.cancelConfirm.cancelling') : 'Wird storniert...') 
+              : (t ? t('orders.cancelConfirm.confirm') : 'Stornieren')
+            }
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };

src/i18n/locales/ar/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "الإجراءات",
     "viewDetails": "عرض التفاصيل"
   },
+  "tooltips": {
+    "viewDetails": "عرض التفاصيل",
+    "cancelOrder": "إلغاء الطلب"
+  },
   "noOrders": "لم تقم بوضع أي طلبات بعد.",
   "details": {
     "title": "تفاصيل الطلب: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "العنصر",
     "quantity": "الكمية",
     "price": "السعر",
+    "vat": "ضريبة القيمة المضافة",
     "total": "الإجمالي",
     "cancelOrder": "إلغاء الطلب"
   },
-  "processing": "يتم إكمال الطلب..."
+  "cancelConfirm": {
+    "title": "إلغاء الطلب",
+    "message": "هل أنت متأكد أنك تريد إلغاء هذا الطلب؟",
+    "confirm": "إلغاء الطلب",
+    "cancelling": "جارٍ الإلغاء..."
+  },
+  "processing": "يتم إكمال الطلب...",
 };

src/i18n/locales/bg/orders.js

@@ -17,23 +17,34 @@ export default {
     "items": "Артикули", 
     "total": "Общо", 
     "actions": "Действия", 
-    "viewDetails": "Виж подробности" 
+    "viewDetails": "Виж детайли" 
+  },
+  "tooltips": {
+    "viewDetails": "Виж детайли", 
+    "cancelOrder": "Отмени поръчката" 
   },
   "noOrders": "Все още не сте направили поръчки.", 
   "details": {
-    "title": "Подробности за поръчка: {{orderId}}", 
+    "title": "Детайли на поръчка: {{orderId}}", 
     "deliveryAddress": "Адрес за доставка", 
     "invoiceAddress": "Адрес за фактура", 
-    "orderDetails": "Подробности за поръчката", 
+    "orderDetails": "Детайли на поръчката", 
-    "deliveryMethod": "Начин на доставка:", 
+    "deliveryMethod": "Метод на доставка:", 
-    "paymentMethod": "Начин на плащане:", 
+    "paymentMethod": "Метод на плащане:", 
     "notSpecified": "Не е посочено", 
     "orderedItems": "Поръчани артикули", 
     "item": "Артикул", 
     "quantity": "Количество", 
     "price": "Цена", 
+    "vat": "ДДС", 
     "total": "Общо", 
     "cancelOrder": "Отмени поръчката" 
   },
+  "cancelConfirm": {
+    "title": "Отмяна на поръчка",
+    "message": "Сигурни ли сте, че искате да отмените тази поръчка?",
+    "confirm": "Отмени поръчката",
+    "cancelling": "Отмяна..."
+  },
   "processing": "Поръчката се обработва...", 
 };

src/i18n/locales/cs/orders.js

@@ -1,7 +1,7 @@
 export default {
   "status": {
     "new": "Probíhá", 
-    "pending": "Nové",
+    "pending": "Nová", 
     "processing": "Probíhá", 
     "cancelled": "Zrušeno", 
     "shipped": "Odesláno", 
@@ -19,6 +19,10 @@ export default {
     "actions": "Akce", 
     "viewDetails": "Zobrazit detaily" 
   },
+  "tooltips": {
+    "viewDetails": "Zobrazit detaily", 
+    "cancelOrder": "Zrušit objednávku" 
+  },
   "noOrders": "Ještě jste neprovedli žádné objednávky.", 
   "details": {
     "title": "Detaily objednávky: {{orderId}}", 
@@ -32,8 +36,15 @@ export default {
     "item": "Položka", 
     "quantity": "Množství", 
     "price": "Cena", 
+    "vat": "DPH", 
     "total": "Celkem", 
     "cancelOrder": "Zrušit objednávku" 
   },
-  "processing": "Objednávka se dokončuje..."
+  "cancelConfirm": {
+    "title": "Zrušit objednávku",
+    "message": "Opravdu chcete tuto objednávku zrušit?",
+    "confirm": "Zrušit objednávku",
+    "cancelling": "Rušení..."
+  },
+  "processing": "Objednávka se dokončuje...", 
 };

src/i18n/locales/de/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Aktionen",
     "viewDetails": "Details anzeigen"
   },
+  "tooltips": {
+    "viewDetails": "Details anzeigen",
+    "cancelOrder": "Bestellung stornieren"
+  },
   "noOrders": "Sie haben noch keine Bestellungen aufgegeben.",
   "details": {
     "title": "Bestelldetails: {{orderId}}",
@@ -35,5 +39,11 @@ export default {
     "total": "Gesamt",
     "cancelOrder": "Bestellung stornieren"
   },
+  "cancelConfirm": {
+    "title": "Bestellung stornieren",
+    "message": "Sind Sie sicher, dass Sie diese Bestellung stornieren möchten?",
+    "confirm": "Stornieren",
+    "cancelling": "Wird storniert..."
+  },
   "processing": "Bestellung wird abgeschlossen..."
 }; 

src/i18n/locales/el/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Ενέργειες",
     "viewDetails": "Προβολή λεπτομερειών"
   },
+  "tooltips": {
+    "viewDetails": "Προβολή λεπτομερειών",
+    "cancelOrder": "Ακύρωση παραγγελίας"
+  },
   "noOrders": "Δεν έχετε κάνει ακόμα καμία παραγγελία.",
   "details": {
     "title": "Λεπτομέρειες παραγγελίας: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Είδος",
     "quantity": "Ποσότητα",
     "price": "Τιμή",
+    "vat": "ΦΠΑ",
     "total": "Σύνολο",
     "cancelOrder": "Ακύρωση παραγγελίας"
   },
-  "processing": "Η παραγγελία ολοκληρώνεται...",
+  "cancelConfirm": {
+    "title": "Ακύρωση παραγγελίας",
+    "message": "Είστε σίγουροι ότι θέλετε να ακυρώσετε αυτήν την παραγγελία;",
+    "confirm": "Ακύρωση παραγγελίας",
+    "cancelling": "Ακύρωση..."
+  },
+  "processing": "Η παραγγελία ολοκληρώνεται..."
 };

src/i18n/locales/en/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Actions", // Aktionen
     "viewDetails": "View details" // Details anzeigen
   },
+  "tooltips": {
+    "viewDetails": "View details", // Details anzeigen
+    "cancelOrder": "Cancel order" // Bestellung stornieren
+  },
   "noOrders": "You have not placed any orders yet.", // Sie haben noch keine Bestellungen aufgegeben.
   "details": {
     "title": "Order details: {{orderId}}", // Bestelldetails: {{orderId}}
@@ -32,8 +36,15 @@ export default {
     "item": "Item", // Artikel
     "quantity": "Quantity", // Menge
     "price": "Price", // Preis
+    "vat": "VAT", // MwSt.
     "total": "Total", // Gesamt
     "cancelOrder": "Cancel order" // Bestellung stornieren
   },
+  "cancelConfirm": {
+    "title": "Cancel Order",
+    "message": "Are you sure you want to cancel this order?",
+    "confirm": "Cancel Order",
+    "cancelling": "Cancelling..."
+  },
   "processing": "Order is being completed...", // Bestellung wird abgeschlossen...
 };

src/i18n/locales/es/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Acciones",
     "viewDetails": "Ver detalles"
   },
+  "tooltips": {
+    "viewDetails": "Ver detalles",
+    "cancelOrder": "Cancelar pedido"
+  },
   "noOrders": "Aún no has realizado ningún pedido.",
   "details": {
     "title": "Detalles del pedido: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Artículo",
     "quantity": "Cantidad",
     "price": "Precio",
+    "vat": "IVA",
     "total": "Total",
     "cancelOrder": "Cancelar pedido"
   },
-  "processing": "El pedido se está completando..."
+  "cancelConfirm": {
+    "title": "Cancelar pedido",
+    "message": "¿Estás seguro de que deseas cancelar este pedido?",
+    "confirm": "Cancelar pedido",
+    "cancelling": "Cancelando..."
+  },
+  "processing": "El pedido se está completando...",
 };

src/i18n/locales/fr/orders.js

@@ -19,7 +19,11 @@ export default {
     "actions": "Actions",
     "viewDetails": "Voir les détails"
   },
-  "noOrders": "Vous n'avez encore passé aucune commande.",
+  "tooltips": {
+    "viewDetails": "Voir les détails",
+    "cancelOrder": "Annuler la commande"
+  },
+  "noOrders": "Vous n'avez pas encore passé de commandes.",
   "details": {
     "title": "Détails de la commande : {{orderId}}",
     "deliveryAddress": "Adresse de livraison",
@@ -32,8 +36,15 @@ export default {
     "item": "Article",
     "quantity": "Quantité",
     "price": "Prix",
+    "vat": "TVA",
     "total": "Total",
     "cancelOrder": "Annuler la commande"
   },
-  "processing": "La commande est en cours de traitement...",
+  "cancelConfirm": {
+    "title": "Annuler la commande",
+    "message": "Êtes-vous sûr de vouloir annuler cette commande ?",
+    "confirm": "Annuler la commande",
+    "cancelling": "Annulation en cours..."
+  },
+  "processing": "La commande est en cours de traitement..."
 };

src/i18n/locales/hr/orders.js

@@ -19,7 +19,11 @@ export default {
     "actions": "Radnje",
     "viewDetails": "Pogledaj detalje"
   },
-  "noOrders": "Još niste izvršili nijednu narudžbu.",
+  "tooltips": {
+    "viewDetails": "Pogledaj detalje",
+    "cancelOrder": "Otkaži narudžbu"
+  },
+  "noOrders": "Još niste napravili nijednu narudžbu.",
   "details": {
     "title": "Detalji narudžbe: {{orderId}}",
     "deliveryAddress": "Adresa dostave",
@@ -32,8 +36,15 @@ export default {
     "item": "Artikl",
     "quantity": "Količina",
     "price": "Cijena",
+    "vat": "PDV",
     "total": "Ukupno",
     "cancelOrder": "Otkaži narudžbu"
   },
-  "processing": "Narudžba se dovršava..."
+  "cancelConfirm": {
+    "title": "Otkaži narudžbu",
+    "message": "Jeste li sigurni da želite otkazati ovu narudžbu?",
+    "confirm": "Otkaži narudžbu",
+    "cancelling": "Otkazivanje..."
+  },
+  "processing": "Narudžba se dovršava...",
 };

src/i18n/locales/hu/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Műveletek",
     "viewDetails": "Részletek megtekintése"
   },
+  "tooltips": {
+    "viewDetails": "Részletek megtekintése",
+    "cancelOrder": "Rendelés törlése"
+  },
   "noOrders": "Még nem adott le rendelést.",
   "details": {
     "title": "Rendelés részletei: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Termék",
     "quantity": "Mennyiség",
     "price": "Ár",
+    "vat": "ÁFA",
     "total": "Összesen",
     "cancelOrder": "Rendelés törlése"
   },
+  "cancelConfirm": {
+    "title": "Rendelés törlése",
+    "message": "Biztosan törölni szeretné ezt a rendelést?",
+    "confirm": "Rendelés törlése",
+    "cancelling": "Törlés folyamatban..."
+  },
   "processing": "A rendelés feldolgozása folyamatban..."
 };

src/i18n/locales/it/orders.js

@@ -8,7 +8,7 @@ export default {
     "delivered": "Consegnato",
     "return": "Reso",
     "partialReturn": "Reso parziale",
-    "partialDelivered": "Consegnato parzialmente"
+    "partialDelivered": "Parzialmente consegnato"
   },
   "table": {
     "orderNumber": "Numero ordine",
@@ -19,6 +19,10 @@ export default {
     "actions": "Azioni",
     "viewDetails": "Visualizza dettagli"
   },
+  "tooltips": {
+    "viewDetails": "Visualizza dettagli",
+    "cancelOrder": "Annulla ordine"
+  },
   "noOrders": "Non hai ancora effettuato ordini.",
   "details": {
     "title": "Dettagli ordine: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Articolo",
     "quantity": "Quantità",
     "price": "Prezzo",
+    "vat": "IVA",
     "total": "Totale",
     "cancelOrder": "Annulla ordine"
   },
-  "processing": "L'ordine è in fase di completamento..."
+  "cancelConfirm": {
+    "title": "Annulla ordine",
+    "message": "Sei sicuro di voler annullare questo ordine?",
+    "confirm": "Annulla ordine",
+    "cancelling": "Annullamento in corso..."
+  },
+  "processing": "Ordine in elaborazione..."
 };

src/i18n/locales/pl/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Akcje",
     "viewDetails": "Pokaż szczegóły"
   },
+  "tooltips": {
+    "viewDetails": "Pokaż szczegóły",
+    "cancelOrder": "Anuluj zamówienie"
+  },
   "noOrders": "Nie złożyłeś jeszcze żadnych zamówień.",
   "details": {
     "title": "Szczegóły zamówienia: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Produkt",
     "quantity": "Ilość",
     "price": "Cena",
+    "vat": "VAT",
     "total": "Razem",
     "cancelOrder": "Anuluj zamówienie"
   },
+  "cancelConfirm": {
+    "title": "Anuluj zamówienie",
+    "message": "Czy na pewno chcesz anulować to zamówienie?",
+    "confirm": "Anuluj zamówienie",
+    "cancelling": "Anulowanie..."
+  },
   "processing": "Zamówienie jest realizowane...",
 };

src/i18n/locales/ro/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Acțiuni",
     "viewDetails": "Vezi detalii"
   },
+  "tooltips": {
+    "viewDetails": "Vezi detalii",
+    "cancelOrder": "Anulează comanda"
+  },
   "noOrders": "Nu ați plasat încă nicio comandă.",
   "details": {
     "title": "Detalii comandă: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Articol",
     "quantity": "Cantitate",
     "price": "Preț",
+    "vat": "TVA",
     "total": "Total",
     "cancelOrder": "Anulează comanda"
   },
-  "processing": "Comanda este în curs de finalizare...", 
+  "cancelConfirm": {
+    "title": "Anulează comanda",
+    "message": "Sigur doriți să anulați această comandă?",
+    "confirm": "Anulează comanda",
+    "cancelling": "Se anulează..."
+  },
+  "processing": "Comanda este în curs de finalizare..."
 };

src/i18n/locales/ru/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Действия",
     "viewDetails": "Просмотреть детали"
   },
+  "tooltips": {
+    "viewDetails": "Просмотреть детали",
+    "cancelOrder": "Отменить заказ"
+  },
   "noOrders": "Вы ещё не сделали ни одного заказа.",
   "details": {
     "title": "Детали заказа: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Товар",
     "quantity": "Количество",
     "price": "Цена",
+    "vat": "НДС",
     "total": "Итого",
     "cancelOrder": "Отменить заказ"
   },
-  "processing": "Заказ оформляется...",
+  "cancelConfirm": {
+    "title": "Отмена заказа",
+    "message": "Вы уверены, что хотите отменить этот заказ?",
+    "confirm": "Отменить заказ",
+    "cancelling": "Отмена..."
+  },
+  "processing": "Заказ обрабатывается...",
 };

src/i18n/locales/sk/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Akcie",
     "viewDetails": "Zobraziť detaily"
   },
+  "tooltips": {
+    "viewDetails": "Zobraziť detaily",
+    "cancelOrder": "Zrušiť objednávku"
+  },
   "noOrders": "Ešte ste neuskutočnili žiadne objednávky.",
   "details": {
     "title": "Detaily objednávky: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Položka",
     "quantity": "Množstvo",
     "price": "Cena",
+    "vat": "DPH",
     "total": "Spolu",
     "cancelOrder": "Zrušiť objednávku"
   },
-  "processing": "Objednávka sa spracováva...", 
+  "cancelConfirm": {
+    "title": "Zrušiť objednávku",
+    "message": "Naozaj chcete zrušiť túto objednávku?",
+    "confirm": "Zrušiť objednávku",
+    "cancelling": "Zrušovanie..."
+  },
+  "processing": "Objednávka sa dokončuje..."
 };

src/i18n/locales/sl/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "Dejanja",
     "viewDetails": "Poglej podrobnosti"
   },
+  "tooltips": {
+    "viewDetails": "Poglej podrobnosti",
+    "cancelOrder": "Prekliči naročilo"
+  },
   "noOrders": "Še niste oddali nobenega naročila.",
   "details": {
     "title": "Podrobnosti naročila: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Izdelek",
     "quantity": "Količina",
     "price": "Cena",
+    "vat": "DDV",
     "total": "Skupaj",
     "cancelOrder": "Prekliči naročilo"
   },
-  "processing": "Naročilo se zaključuje..."
+  "cancelConfirm": {
+    "title": "Prekliči naročilo",
+    "message": "Ste prepričani, da želite preklicati to naročilo?",
+    "confirm": "Prekliči naročilo",
+    "cancelling": "Preklicujem..."
+  },
+  "processing": "Naročilo se zaključuje...",
 };

src/i18n/locales/sr/orders.js

@@ -6,8 +6,8 @@ export default {
     "cancelled": "Otkazano",
     "shipped": "Poslato",
     "delivered": "Isporučeno",
-    "return": "Povrat",
+    "return": "Povraćaj",
-    "partialReturn": "Delimični povrat",
+    "partialReturn": "Delimični povraćaj",
     "partialDelivered": "Delimično isporučeno"
   },
   "table": {
@@ -19,7 +19,11 @@ export default {
     "actions": "Akcije",
     "viewDetails": "Pogledaj detalje"
   },
-  "noOrders": "Još niste napravili nijednu porudžbinu.",
+  "tooltips": {
+    "viewDetails": "Pogledaj detalje",
+    "cancelOrder": "Otkaži porudžbinu"
+  },
+  "noOrders": "Još uvek niste napravili nijednu porudžbinu.",
   "details": {
     "title": "Detalji porudžbine: {{orderId}}",
     "deliveryAddress": "Adresa za isporuku",
@@ -32,8 +36,15 @@ export default {
     "item": "Artikal",
     "quantity": "Količina",
     "price": "Cena",
+    "vat": "PDV",
     "total": "Ukupno",
     "cancelOrder": "Otkaži porudžbinu"
   },
+  "cancelConfirm": {
+    "title": "Otkaži porudžbinu",
+    "message": "Da li ste sigurni da želite da otkažete ovu porudžbinu?",
+    "confirm": "Otkaži porudžbinu",
+    "cancelling": "Otkazivanje..."
+  },
   "processing": "Porudžbina se obrađuje...",
 };

src/i18n/locales/sv/orders.js

@@ -19,7 +19,11 @@ export default {
     "actions": "Åtgärder",
     "viewDetails": "Visa detaljer"
   },
-  "noOrders": "Du har inte gjort några beställningar än.",
+  "tooltips": {
+    "viewDetails": "Visa detaljer",
+    "cancelOrder": "Avbryt order"
+  },
+  "noOrders": "Du har inte lagt några beställningar än.",
   "details": {
     "title": "Orderdetaljer: {{orderId}}",
     "deliveryAddress": "Leveransadress",
@@ -32,8 +36,15 @@ export default {
     "item": "Artikel",
     "quantity": "Antal",
     "price": "Pris",
+    "vat": "Moms",
     "total": "Totalt",
     "cancelOrder": "Avbryt order"
   },
+  "cancelConfirm": {
+    "title": "Avbryt order",
+    "message": "Är du säker på att du vill avbryta denna order?",
+    "confirm": "Avbryt order",
+    "cancelling": "Avbryter..."
+  },
   "processing": "Ordern behandlas..."
 };

src/i18n/locales/tr/orders.js

@@ -19,6 +19,10 @@ export default {
     "actions": "İşlemler",
     "viewDetails": "Detayları görüntüle"
   },
+  "tooltips": {
+    "viewDetails": "Detayları görüntüle",
+    "cancelOrder": "Siparişi iptal et"
+  },
   "noOrders": "Henüz sipariş vermediniz.",
   "details": {
     "title": "Sipariş detayları: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
     "item": "Ürün",
     "quantity": "Adet",
     "price": "Fiyat",
+    "vat": "KDV",
     "total": "Toplam",
     "cancelOrder": "Siparişi iptal et"
   },
+  "cancelConfirm": {
+    "title": "Siparişi İptal Et",
+    "message": "Bu siparişi iptal etmek istediğinizden emin misiniz?",
+    "confirm": "Siparişi İptal Et",
+    "cancelling": "İptal ediliyor..."
+  },
   "processing": "Sipariş tamamlanıyor...",
 };

src/i18n/locales/uk/orders.js

@@ -19,7 +19,11 @@ export default {
     "actions": "Дії",
     "viewDetails": "Переглянути деталі"
   },
-  "noOrders": "Ви ще не зробили жодного замовлення.",
+  "tooltips": {
+    "viewDetails": "Переглянути деталі",
+    "cancelOrder": "Скасувати замовлення"
+  },
+  "noOrders": "Ви ще не робили замовлень.",
   "details": {
     "title": "Деталі замовлення: {{orderId}}",
     "deliveryAddress": "Адреса доставки",
@@ -32,8 +36,15 @@ export default {
     "item": "Товар",
     "quantity": "Кількість",
     "price": "Ціна",
+    "vat": "ПДВ",
     "total": "Всього",
     "cancelOrder": "Скасувати замовлення"
   },
+  "cancelConfirm": {
+    "title": "Скасувати замовлення",
+    "message": "Ви впевнені, що хочете скасувати це замовлення?",
+    "confirm": "Скасувати замовлення",
+    "cancelling": "Скасування..."
+  },
   "processing": "Замовлення обробляється...",
 };

src/i18n/locales/zh/orders.js

@@ -19,21 +19,32 @@ export default {
     "actions": "操作",
     "viewDetails": "查看详情"
   },
+  "tooltips": {
+    "viewDetails": "查看详情",
+    "cancelOrder": "取消订单"
+  },
   "noOrders": "您尚未下过任何订单。",
   "details": {
-    "title": "订单详情：{{orderId}}",
+    "title": "订单详情: {{orderId}}",
     "deliveryAddress": "收货地址",
     "invoiceAddress": "发票地址",
     "orderDetails": "订单详情",
-    "deliveryMethod": "配送方式：",
+    "deliveryMethod": "配送方式:",
-    "paymentMethod": "支付方式：",
+    "paymentMethod": "支付方式:",
     "notSpecified": "未指定",
     "orderedItems": "订购商品",
     "item": "商品",
     "quantity": "数量",
     "price": "价格",
+    "vat": "增值税",
     "total": "总计",
     "cancelOrder": "取消订单"
   },
-  "processing": "订单正在处理中..."
+  "cancelConfirm": {
+    "title": "取消订单",
+    "message": "您确定要取消此订单吗？",
+    "confirm": "取消订单",
+    "cancelling": "正在取消..."
+  },
+  "processing": "订单正在处理..."
 };

src/pages/ProfilePage.js

@@ -109,15 +109,24 @@ const ProfilePage = (props) => {
         setOrderIdFromHash(null);
         break;
       default:
-        if (hash && hash.startsWith('#ORD-')) {
+        if (hash && hash.length > 1) {
-          const orderId = hash.substring(1);
+          // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
-          setOrderIdFromHash(orderId);
+          const potentialOrderId = hash.substring(1);
-          setTabValue(1); // Switch to Orders tab
+          if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
+            setOrderIdFromHash(potentialOrderId);
+            setTabValue(1); // Switch to Orders tab
+          } else {
+            setOrderIdFromHash(null);
+          }
         } else {
           setOrderIdFromHash(null);
+          // If no hash is present, set default to cart tab
+          if (!hash) {
+            navigate('/profile#cart', { replace: true });
+          }
         }
     }
-  }, [location.hash]);
+  }, [location.hash, navigate]);
 
   useEffect(() => {
     const checkUserLoggedIn = () => {
@@ -169,10 +178,23 @@ const ProfilePage = (props) => {
 
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
+    
+    // Update the hash based on the selected tab
+    const hashMap = {
+      0: '#cart',
+      1: '#orders', 
+      2: '#settings'
+    };
+    
+    const newHash = hashMap[newValue];
+    if (newHash) {
+      navigate(`/profile${newHash}`, { replace: true });
+    }
   };
 
   const handleGoToOrders = () => {
     setTabValue(1);
+    navigate('/profile#orders', { replace: true });
   };
 
   const handleClearPaymentCompletion = () => {