Added Dummy orders page
This commit is contained in:
FlorianSpeicher
@@ -1,34 +1,133 @@
|
||||
import { Box, Typography, Button } from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import "./pages.css";
|
||||
|
||||
export default function Orders() {
|
||||
const navigate = useNavigate();
|
||||
type Order = {
|
||||
id: string;
|
||||
date: string;
|
||||
status: "laufend" | "abgeschlossen";
|
||||
items: { name: string; quantity: number; price: number }[];
|
||||
total: number;
|
||||
address: string;
|
||||
};
|
||||
|
||||
const handleGoHome = () => {
|
||||
navigate("/");
|
||||
const mockOrders: Order[] = [
|
||||
{
|
||||
id: "1001",
|
||||
date: "2025-05-20",
|
||||
status: "laufend",
|
||||
items: [
|
||||
{ name: "Tomatensamen", quantity: 2, price: 3.99 },
|
||||
{ name: "Blumenerde", quantity: 1, price: 7.49 }
|
||||
],
|
||||
total: 15.47,
|
||||
address: "Musterstraße 1, 12345 Musterstadt"
|
||||
},
|
||||
{
|
||||
id: "1000",
|
||||
date: "2025-05-10",
|
||||
status: "abgeschlossen",
|
||||
items: [
|
||||
{ name: "Gießkanne", quantity: 1, price: 12.99 }
|
||||
],
|
||||
total: 12.99,
|
||||
address: "Musterstraße 1, 12345 Musterstadt"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Orders() {
|
||||
const [tab, setTab] = useState(0);
|
||||
const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
|
||||
|
||||
const laufendeBestellungen = mockOrders.filter(o => o.status === "laufend");
|
||||
const vergangeneBestellungen = mockOrders.filter(o => o.status === "abgeschlossen");
|
||||
|
||||
const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
|
||||
|
||||
const handleCancelOrder = (orderId: string) => {
|
||||
// Hier API-Call zum Stornieren einbauen
|
||||
alert(`Bestellung ${orderId} wurde storniert.`);
|
||||
setSelectedOrder(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box className="no-page-container">
|
||||
<Typography variant="h1" className="no-page-title">
|
||||
Orders
|
||||
<Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
|
||||
<Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Meine Bestellungen
|
||||
</Typography>
|
||||
<Typography variant="h5" className="no-page-subtitle">
|
||||
Oops! The page you're looking for doesn't exist.
|
||||
</Typography>
|
||||
<Typography variant="body1" className="no-page-description">
|
||||
It seems you may have taken a wrong turn. Let's get you back on track.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
className="no-page-button"
|
||||
onClick={handleGoHome}
|
||||
>
|
||||
Go Back to Home
|
||||
<Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
|
||||
<Tab label="Laufende Bestellungen" />
|
||||
<Tab label="Vergangene Bestellungen" />
|
||||
</Tabs>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
{tab === 0 ? (
|
||||
laufendeBestellungen.length > 0 ? (
|
||||
<List>
|
||||
{laufendeBestellungen.map(order => (
|
||||
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
|
||||
<ListItemText
|
||||
primary={`Bestellung #${order.id} • ${order.date}`}
|
||||
secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
|
||||
/>
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
) : (
|
||||
<Typography color="text.secondary">Keine laufenden Bestellungen.</Typography>
|
||||
)
|
||||
) : (
|
||||
vergangeneBestellungen.length > 0 ? (
|
||||
<List>
|
||||
{vergangeneBestellungen.map(order => (
|
||||
<ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
|
||||
<ListItemText
|
||||
primary={`Bestellung #${order.id} • ${order.date}`}
|
||||
secondary={`Summe: ${order.total.toFixed(2)} € • ${order.items.length} Artikel`}
|
||||
/>
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
) : (
|
||||
<Typography color="text.secondary">Keine vergangenen Bestellungen.</Typography>
|
||||
)
|
||||
)}
|
||||
|
||||
<Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>
|
||||
{selectedOrder?.status === "laufend" ? "Laufende Bestellung" : "Vergangene Bestellung"} #{selectedOrder?.id}
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
{selectedOrder && (
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="subtitle1">Bestelldatum: {selectedOrder.date}</Typography>
|
||||
<Typography variant="subtitle1">Lieferadresse: {selectedOrder.address}</Typography>
|
||||
<Divider />
|
||||
<Typography variant="subtitle2">Artikel:</Typography>
|
||||
<List dense>
|
||||
{selectedOrder.items.map((item, idx) => (
|
||||
<ListItemText
|
||||
key={idx}
|
||||
primary={`${item.name} x${item.quantity}`}
|
||||
secondary={`Einzelpreis: ${item.price.toFixed(2)} €`}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
<Typography variant="h6">Gesamtsumme: {selectedOrder.total.toFixed(2)} €</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
{selectedOrder?.status === "laufend" && (
|
||||
<Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
|
||||
Bestellung stornieren
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={() => setSelectedOrder(null)}>Schließen</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user