93 lines
4.1 KiB
TypeScript
93 lines
4.1 KiB
TypeScript
import { AccountCircle, Category, QueryStats, ReceiptLong } from "@mui/icons-material";
|
|
import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import AccountsInfo from "../helper/adminpanel/AccountsInfo";
|
|
import OrdersInfo from "../helper/adminpanel/OrdersInfo";
|
|
import StatisticsInfo from "../helper/adminpanel/StatisticsInfo";
|
|
import ItemInfo from "../helper/adminpanel/ItemsInfo";
|
|
|
|
export default function AdminPanel() {
|
|
const { t } = useTranslation();
|
|
const [infoStatus, setInfoStatus] = useState<string>("statistics"); // Standardseite
|
|
|
|
const handleInfoStatus = (path: string) => {
|
|
console.log("Button clicked:", path); // Debugging
|
|
setInfoStatus(path);
|
|
};
|
|
|
|
const renderContent = () => {
|
|
console.log("Rendering content for:", infoStatus); // Debugging
|
|
switch (infoStatus) {
|
|
case "statistics":
|
|
return <StatisticsInfo />;
|
|
case "orders":
|
|
return <OrdersInfo />;
|
|
case "accounts":
|
|
return <AccountsInfo />;
|
|
case "items":
|
|
return <ItemInfo />;
|
|
default:
|
|
return <StatisticsInfo />; // Fallback, falls kein gültiger Status
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="page-container">
|
|
<Box>
|
|
<Typography variant="h3" align="center" gutterBottom sx={{ color: 'text.primary' }}>
|
|
Admin Panel
|
|
</Typography>
|
|
<Typography variant="subtitle1" align="center">
|
|
Manage your application settings and content here.
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ display: "flex", gap: 4 }}>
|
|
{/* Sidebar */}
|
|
<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper', border: '1px solid red' }}>
|
|
<nav aria-label="main mailbox folders">
|
|
<List>
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={() => handleInfoStatus("statistics")}>
|
|
<ListItemIcon>
|
|
<QueryStats />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("statistics")} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={() => handleInfoStatus("orders")}>
|
|
<ListItemIcon>
|
|
<ReceiptLong />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("orders")} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={() => handleInfoStatus("accounts")}>
|
|
<ListItemIcon>
|
|
<AccountCircle />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("accounts")} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={() => handleInfoStatus("items")}>
|
|
<ListItemIcon>
|
|
<Category />
|
|
</ListItemIcon>
|
|
<ListItemText primary={t("items")} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</nav>
|
|
</Box>
|
|
|
|
{/* Content */}
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
{renderContent()}
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
);
|
|
} |