48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
import { useAuth } from "../context/AuthContext";
|
||
|
|
import { PageHeader } from "../components/PageHeader";
|
||
|
|
|
||
|
|
const CARDS = [
|
||
|
|
{ label: "Catalog", desc: "Products, categories, pricing", to: "/catalog" },
|
||
|
|
{ label: "Users", desc: "Manage roles and access", to: "/users" },
|
||
|
|
{ label: "Vendor", desc: "Business details and tax settings", to: "/vendor" },
|
||
|
|
{ label: "Reports", desc: "Sales and tax summaries", to: "/reports" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function DashboardPage() {
|
||
|
|
const { user } = useAuth();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ padding: "32px 28px", maxWidth: 900 }}>
|
||
|
|
<PageHeader
|
||
|
|
title="Dashboard"
|
||
|
|
subtitle={`Welcome back, ${user?.name} · ${user?.vendorName}`}
|
||
|
|
/>
|
||
|
|
<div style={grid}>
|
||
|
|
{CARDS.map((card) => (
|
||
|
|
<a key={card.label} href={card.to} style={cardStyle}>
|
||
|
|
<div style={{ fontWeight: 600, marginBottom: 4 }}>{card.label}</div>
|
||
|
|
<div style={{ color: "var(--color-text-muted)", fontSize: 13 }}>{card.desc}</div>
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const grid: React.CSSProperties = {
|
||
|
|
display: "grid",
|
||
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
|
||
|
|
gap: 16,
|
||
|
|
};
|
||
|
|
|
||
|
|
const cardStyle: React.CSSProperties = {
|
||
|
|
background: "var(--color-surface)",
|
||
|
|
border: "1px solid var(--color-border)",
|
||
|
|
borderRadius: "var(--radius)",
|
||
|
|
padding: "20px",
|
||
|
|
boxShadow: "var(--shadow)",
|
||
|
|
textDecoration: "none",
|
||
|
|
color: "var(--color-text)",
|
||
|
|
display: "block",
|
||
|
|
};
|