jason
d53c772dd6
- Node/Express/TypeScript API under /api/v1 with JWT auth (login, refresh, logout, /me) - Prisma schema: vendors, users, roles, products, categories, taxes, transactions - SQLite for local dev; Postgres via docker-compose for production - Full CRUD routes for vendors, users, categories, taxes, products with Zod validation and RBAC - Paginated list endpoints scoped per vendor; refresh token rotation - React/TypeScript admin SPA (Vite): login, protected routing, sidebar layout - Pages: Dashboard, Catalog (tabbed Products/Categories/Taxes), Users, Vendor Settings - Shared UI: Table, Modal, FormField, Btn, PageHeader components - Multi-stage Dockerfile; docker-compose with Postgres healthcheck - Seed script with demo vendor and owner account - INSTRUCTIONS.md, ROADMAP.md, .claude/launch.json for dev server config Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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",
|
|
};
|