dashboard
This commit is contained in:
@@ -4,7 +4,7 @@ import { useAuth } from "../auth/AuthProvider";
|
||||
import { ThemeToggle } from "./ThemeToggle";
|
||||
|
||||
const links = [
|
||||
{ to: "/", label: "Overview" },
|
||||
{ to: "/", label: "Dashboard" },
|
||||
{ to: "/settings/company", label: "Company Settings" },
|
||||
{ to: "/crm/customers", label: "Customers" },
|
||||
{ to: "/crm/vendors", label: "Vendors" },
|
||||
|
||||
@@ -1,39 +1,137 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function DashboardPage() {
|
||||
const metricCards = [
|
||||
{ label: "CRM Scope", value: "Complete", detail: "Customers, vendors, hierarchy, contacts, attachments", tone: "border-emerald-400/30 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300" },
|
||||
{ label: "Inventory", value: "Live", detail: "Items, BOMs, warehouses, stock, transactions", tone: "border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300" },
|
||||
{ label: "Sales", value: "Active", detail: "Quotes, orders, totals, reseller pricing defaults", tone: "border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300" },
|
||||
{ label: "Shipping", value: "Online", detail: "Shipments, status flow, packing-slip PDFs", tone: "border-brand/30 bg-brand/10 text-brand" },
|
||||
];
|
||||
|
||||
const modulePanels = [
|
||||
{
|
||||
title: "Commercial",
|
||||
eyebrow: "Revenue Flow",
|
||||
summary: "Quotes and sales orders now support item pricing, discount, tax, freight, and conversion workflows.",
|
||||
metrics: [
|
||||
{ label: "Quote -> SO", value: "Enabled" },
|
||||
{ label: "Totals Logic", value: "Live" },
|
||||
{ label: "Customer Lookup", value: "Searchable" },
|
||||
],
|
||||
links: [
|
||||
{ label: "Open quotes", to: "/sales/quotes" },
|
||||
{ label: "Open sales orders", to: "/sales/orders" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Operations",
|
||||
eyebrow: "Stock + Ship",
|
||||
summary: "Inventory and shipping now share a usable operational path from item master through shipment paperwork.",
|
||||
metrics: [
|
||||
{ label: "On-Hand", value: "Tracked" },
|
||||
{ label: "Shipments", value: "Linked" },
|
||||
{ label: "Packing Slips", value: "Ready" },
|
||||
],
|
||||
links: [
|
||||
{ label: "Open inventory", to: "/inventory/items" },
|
||||
{ label: "Open shipments", to: "/shipping/shipments" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Planning",
|
||||
eyebrow: "Next Layer",
|
||||
summary: "The dashboard is now intended as a modular command surface for future purchasing, manufacturing, and execution metrics.",
|
||||
metrics: [
|
||||
{ label: "PO Module", value: "Next" },
|
||||
{ label: "Gantt", value: "Preview" },
|
||||
{ label: "Audit", value: "Pending" },
|
||||
],
|
||||
links: [
|
||||
{ label: "Open gantt", to: "/planning/gantt" },
|
||||
{ label: "Company settings", to: "/settings/company" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const futureModules = [
|
||||
"Purchasing queue and supplier receipts",
|
||||
"Shipment labels and bills of lading",
|
||||
"Manufacturing schedule and bottleneck metrics",
|
||||
"Audit and system-health diagnostics",
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
|
||||
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel backdrop-blur">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Foundation Status</p>
|
||||
<h3 className="mt-2 text-xl font-bold text-text">Platform primitives are online.</h3>
|
||||
<p className="mt-3 max-w-2xl text-sm leading-6 text-muted">
|
||||
Authentication, RBAC, runtime branding, attachment storage, Docker deployment, and a planning visualization wrapper are now structured for future domain expansion.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<Link className="rounded-2xl bg-brand px-3 py-2 text-sm font-semibold text-white" to="/settings/company">
|
||||
Manage company profile
|
||||
</Link>
|
||||
<Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/inventory/items">
|
||||
Open inventory
|
||||
</Link>
|
||||
<Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/planning/gantt">
|
||||
Open gantt preview
|
||||
</Link>
|
||||
<div className="space-y-4">
|
||||
<section className="overflow-hidden rounded-[30px] border border-line/70 bg-surface/90 shadow-panel backdrop-blur">
|
||||
<div className="grid gap-0 xl:grid-cols-[1.35fr_0.65fr]">
|
||||
<div className="relative overflow-hidden p-5 2xl:p-6">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(24,90,219,0.16),_transparent_44%),linear-gradient(135deg,rgba(255,255,255,0.06),transparent)]" />
|
||||
<div className="relative">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Dashboard</p>
|
||||
<h3 className="mt-2 max-w-3xl text-2xl font-extrabold text-text">Operational command surface for metrics, movement, and next actions.</h3>
|
||||
<p className="mt-3 max-w-3xl text-sm leading-6 text-muted">
|
||||
This dashboard is now the primary landing surface for the platform. It is intended to stay modular as purchasing, manufacturing, shipping, and audit metrics are added in future slices.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<Link className="rounded-2xl bg-brand px-3 py-2 text-sm font-semibold text-white" to="/sales/orders">
|
||||
Open sales orders
|
||||
</Link>
|
||||
<Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/shipping/shipments">
|
||||
Open shipments
|
||||
</Link>
|
||||
<Link className="rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text" to="/inventory/items">
|
||||
Open inventory
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-l border-line/70 bg-page/40 p-5 2xl:p-6">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Upgrade Path</p>
|
||||
<div className="mt-4 space-y-3">
|
||||
{futureModules.map((item) => (
|
||||
<div key={item} className="rounded-2xl border border-line/70 bg-surface/80 px-2 py-2 text-sm text-text">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel backdrop-blur">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Roadmap</p>
|
||||
<div className="mt-5 space-y-4">
|
||||
{[
|
||||
"CRM reference entities are seeded and available via protected APIs.",
|
||||
"Company Settings drives runtime brand tokens and PDF identity.",
|
||||
"Inventory item master and BOM records now have a dedicated protected module.",
|
||||
].map((item) => (
|
||||
<div key={item} className="rounded-2xl border border-line/70 bg-page/70 px-2 py-2 text-sm text-text">
|
||||
{item}
|
||||
<section className="grid gap-3 xl:grid-cols-4">
|
||||
{metricCards.map((card) => (
|
||||
<article key={card.label} className="rounded-[24px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">{card.label}</p>
|
||||
<div className="mt-2 flex items-center justify-between gap-3">
|
||||
<div className="text-xl font-extrabold text-text">{card.value}</div>
|
||||
<span className={`rounded-full px-2 py-1 text-xs font-semibold ${card.tone}`}>Live</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted">{card.detail}</p>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
<section className="grid gap-3 xl:grid-cols-3">
|
||||
{modulePanels.map((panel) => (
|
||||
<article key={panel.title} className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">{panel.eyebrow}</p>
|
||||
<h4 className="mt-2 text-lg font-bold text-text">{panel.title}</h4>
|
||||
<p className="mt-3 text-sm leading-6 text-muted">{panel.summary}</p>
|
||||
<div className="mt-5 grid gap-2">
|
||||
{panel.metrics.map((metric) => (
|
||||
<div key={metric.label} className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
|
||||
<span className="text-muted">{metric.label}</span>
|
||||
<span className="font-semibold text-text">{metric.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-5 flex flex-wrap gap-2">
|
||||
{panel.links.map((link) => (
|
||||
<Link key={link.to} to={link.to} className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user