From e88d949a59aafd8892eeb5f1c0ed1f2ae1983fec Mon Sep 17 00:00:00 2001 From: jason Date: Sun, 15 Mar 2026 19:58:26 -0500 Subject: [PATCH] ui cleanup --- client/src/components/AppShell.tsx | 44 +-- client/src/components/ThemeToggle.tsx | 3 +- .../src/modules/dashboard/DashboardPage.tsx | 283 +++--------------- 3 files changed, 67 insertions(+), 263 deletions(-) diff --git a/client/src/components/AppShell.tsx b/client/src/components/AppShell.tsx index c024fff..acdec7a 100644 --- a/client/src/components/AppShell.tsx +++ b/client/src/components/AppShell.tsx @@ -189,7 +189,7 @@ export function AppShell() { return (
-
diff --git a/client/src/components/ThemeToggle.tsx b/client/src/components/ThemeToggle.tsx index d772ae4..9aa8115 100644 --- a/client/src/components/ThemeToggle.tsx +++ b/client/src/components/ThemeToggle.tsx @@ -7,10 +7,9 @@ export function ThemeToggle() { ); } - diff --git a/client/src/modules/dashboard/DashboardPage.tsx b/client/src/modules/dashboard/DashboardPage.tsx index 99de6a3..592061b 100644 --- a/client/src/modules/dashboard/DashboardPage.tsx +++ b/client/src/modules/dashboard/DashboardPage.tsx @@ -33,19 +33,6 @@ function formatCurrency(value: number) { }).format(value); } -function formatDateTime(value: string | null) { - if (!value) { - return "No recent activity"; - } - - return new Intl.DateTimeFormat("en-US", { - month: "short", - day: "numeric", - hour: "numeric", - minute: "2-digit", - }).format(new Date(value)); -} - function sumNumber(values: number[]) { return values.reduce((total, value) => total + value, 0); } @@ -148,17 +135,6 @@ export function DashboardPage() { const projects = snapshot?.projects ?? []; const planningRollup = snapshot?.planningRollup; - const accessibleModules = [ - snapshot?.customers !== null || snapshot?.vendors !== null, - snapshot?.items !== null || snapshot?.warehouses !== null, - snapshot?.purchaseOrders !== null, - snapshot?.workOrders !== null, - snapshot?.quotes !== null || snapshot?.orders !== null, - snapshot?.shipments !== null, - snapshot?.projects !== null, - canReadPlanning, - ].filter(Boolean).length; - const customerCount = customers.length; const resellerCount = customers.filter((customer) => customer.isReseller).length; const activeCustomerCount = customers.filter((customer) => customer.lifecycleStage === "ACTIVE").length; @@ -209,91 +185,45 @@ export function DashboardPage() { const buildRecommendationCount = planningRollup?.summary.buildRecommendationCount ?? 0; const totalUncoveredQuantity = planningRollup?.summary.totalUncoveredQuantity ?? 0; - const lastActivityAt = [ - ...customers.map((customer) => customer.updatedAt), - ...vendors.map((vendor) => vendor.updatedAt), - ...items.map((item) => item.updatedAt), - ...warehouses.map((warehouse) => warehouse.updatedAt), - ...purchaseOrders.map((order) => order.updatedAt), - ...workOrders.map((workOrder) => workOrder.updatedAt), - ...quotes.map((quote) => quote.updatedAt), - ...orders.map((order) => order.updatedAt), - ...shipments.map((shipment) => shipment.updatedAt), - ...projects.map((project) => project.updatedAt), - ] - .sort() - .at(-1) ?? null; - const metricCards = [ { label: "CRM Accounts", value: snapshot?.customers !== null ? `${customerCount}` : "No access", - detail: - snapshot?.customers !== null - ? `${vendorCount} vendors, ${resellerCount} resellers, ${activeCustomerCount} active` - : "CRM metrics are permission-gated.", tone: "border-emerald-400/30 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300", }, { label: "Inventory Footprint", value: snapshot?.items !== null ? `${itemCount}` : "No access", - detail: - snapshot?.items !== null - ? `${assemblyCount} buildable items across ${warehouseCount} warehouses` - : "Inventory metrics are permission-gated.", tone: "border-sky-400/30 bg-sky-500/12 text-sky-700 dark:text-sky-300", }, { label: "Purchasing Queue", value: snapshot?.purchaseOrders !== null ? `${openPurchaseOrderCount}` : "No access", - detail: - snapshot?.purchaseOrders !== null - ? `${issuedPurchaseOrderCount} issued/approved and ${formatCurrency(purchaseOrderValue)} committed` - : "Purchasing metrics are permission-gated.", tone: "border-teal-400/30 bg-teal-500/12 text-teal-700 dark:text-teal-300", }, { label: "Manufacturing Load", value: snapshot?.workOrders !== null ? `${activeWorkOrderCount}` : "No access", - detail: - snapshot?.workOrders !== null - ? `${releasedWorkOrderCount} released and ${overdueWorkOrderCount} overdue` - : "Manufacturing metrics are permission-gated.", tone: "border-indigo-400/30 bg-indigo-500/12 text-indigo-700 dark:text-indigo-300", }, { label: "Commercial Value", value: snapshot?.quotes !== null || snapshot?.orders !== null ? formatCurrency(quoteValue + orderValue) : "No access", - detail: - snapshot?.quotes !== null || snapshot?.orders !== null - ? `${quoteCount} quotes and ${orderCount} orders in the pipeline` - : "Sales metrics are permission-gated.", tone: "border-amber-400/30 bg-amber-500/12 text-amber-700 dark:text-amber-300", }, { label: "Shipping Queue", value: snapshot?.shipments !== null ? `${activeShipmentCount}` : "No access", - detail: - snapshot?.shipments !== null - ? `${inTransitCount} in transit, ${deliveredCount} delivered` - : "Shipping metrics are permission-gated.", tone: "border-brand/30 bg-brand/10 text-brand", }, { label: "Project Load", value: snapshot?.projects !== null ? `${activeProjectCount}` : "No access", - detail: - snapshot?.projects !== null - ? `${atRiskProjectCount} at risk and ${overdueProjectCount} overdue` - : "Project metrics are permission-gated.", tone: "border-violet-400/30 bg-violet-500/12 text-violet-700 dark:text-violet-300", }, { label: "Material Readiness", value: planningRollup ? `${shortageItemCount}` : "No access", - detail: planningRollup - ? `${buildRecommendationCount} build and ${buyRecommendationCount} buy recommendations` - : "Sales read permission is required to surface shortage rollups.", tone: "border-rose-400/30 bg-rose-500/12 text-rose-700 dark:text-rose-300", }, ]; @@ -301,11 +231,6 @@ export function DashboardPage() { const modulePanels = [ { title: "CRM", - eyebrow: "Account Health", - summary: - snapshot?.customers !== null - ? "Live account counts, reseller coverage, and strategic-account concentration from the current CRM records." - : "CRM read permission is required to surface customer and vendor metrics here.", metrics: [ { label: "Customers", value: snapshot?.customers !== null ? `${customerCount}` : "No access" }, { label: "Strategic", value: snapshot?.customers !== null ? `${strategicCustomerCount}` : "No access" }, @@ -318,11 +243,6 @@ export function DashboardPage() { }, { title: "Inventory", - eyebrow: "Master + Stock", - summary: - snapshot?.items !== null - ? "Item master, BOM-capable parts, and warehouse footprint are now feeding the dashboard directly." - : "Inventory read permission is required to surface item and warehouse metrics here.", metrics: [ { label: "Active items", value: snapshot?.items !== null ? `${activeItemCount}` : "No access" }, { label: "Assemblies", value: snapshot?.items !== null ? `${assemblyCount}` : "No access" }, @@ -335,11 +255,6 @@ export function DashboardPage() { }, { title: "Purchasing", - eyebrow: "Inbound Supply", - summary: - snapshot?.purchaseOrders !== null - ? "Purchase orders, open commitments, and current inbound procurement load are now visible from the dashboard." - : "Purchasing read permission is required to surface procurement metrics here.", metrics: [ { label: "Open POs", value: snapshot?.purchaseOrders !== null ? `${openPurchaseOrderCount}` : "No access" }, { label: "Issued", value: snapshot?.purchaseOrders !== null ? `${issuedPurchaseOrderCount}` : "No access" }, @@ -351,11 +266,6 @@ export function DashboardPage() { }, { title: "Manufacturing", - eyebrow: "Execution Load", - summary: - snapshot?.workOrders !== null - ? "Work orders, released load, and overdue build pressure are now visible from the dashboard." - : "Manufacturing read permission is required to surface work-order metrics here.", metrics: [ { label: "Open work", value: snapshot?.workOrders !== null ? `${activeWorkOrderCount}` : "No access" }, { label: "Released", value: snapshot?.workOrders !== null ? `${releasedWorkOrderCount}` : "No access" }, @@ -368,11 +278,6 @@ export function DashboardPage() { }, { title: "Sales", - eyebrow: "Revenue Flow", - summary: - snapshot?.quotes !== null || snapshot?.orders !== null - ? "Quotes and sales orders now contribute real commercial value, open-document counts, and pipeline visibility." - : "Sales read permission is required to surface commercial metrics here.", metrics: [ { label: "Quote value", value: snapshot?.quotes !== null ? formatCurrency(quoteValue) : "No access" }, { label: "Order value", value: snapshot?.orders !== null ? formatCurrency(orderValue) : "No access" }, @@ -385,11 +290,6 @@ export function DashboardPage() { }, { title: "Shipping", - eyebrow: "Execution Queue", - summary: - snapshot?.shipments !== null - ? "Shipment records, in-transit volume, and completed deliveries are now visible from the landing page." - : "Shipping read permission is required to surface shipment metrics here.", metrics: [ { label: "Open shipments", value: snapshot?.shipments !== null ? `${activeShipmentCount}` : "No access" }, { label: "In transit", value: snapshot?.shipments !== null ? `${inTransitCount}` : "No access" }, @@ -402,11 +302,6 @@ export function DashboardPage() { }, { title: "Projects", - eyebrow: "Program Control", - summary: - snapshot?.projects !== null - ? "Project records now tie customers, commercial documents, shipment context, and delivery ownership into one operational surface." - : "Project read permission is required to surface program metrics here.", metrics: [ { label: "Active", value: snapshot?.projects !== null ? `${activeProjectCount}` : "No access" }, { label: "At risk", value: snapshot?.projects !== null ? `${atRiskProjectCount}` : "No access" }, @@ -419,10 +314,6 @@ export function DashboardPage() { }, { title: "Planning", - eyebrow: "Schedule Visibility", - summary: canReadPlanning - ? "Live gantt planning now pulls directly from active projects and open manufacturing work orders, with shared shortage/readiness rollups alongside schedule pressure." - : "Planning read permission is required to surface the live gantt schedule.", metrics: [ { label: "At risk projects", value: canReadPlanning ? `${atRiskProjectCount}` : "No access" }, { label: "Shortage items", value: canReadPlanning && planningRollup ? `${shortageItemCount}` : "No access" }, @@ -432,108 +323,27 @@ export function DashboardPage() { }, ]; - const futureModules = [ - "Stock transfers, allocations, and cycle counts", - "Revision comparison and document restore tooling", - "Audit trails, diagnostics, and system health checks", - ]; - return (
-
-
-
-
-
-
-
-

Dashboard

-

Operational command surface for metrics, movement, and next actions.

-
-
-

Last Refresh

-

{snapshot ? formatDateTime(snapshot.refreshedAt) : "Waiting"}

-
-
-

- This landing page now reads directly from live CRM, inventory, purchasing, manufacturing, sales, shipping, and project data. It is - intentionally modular so future planning, approvals, and audit slices can slot into the same command surface without a redesign. -

-
-
-

Modules Live

-

{accessibleModules}

-
-
-

Recent Activity

-

{formatDateTime(lastActivityAt)}

-
-
-

Loading State

-

{isLoading ? "Refreshing data" : "Live snapshot loaded"}

-
-
-
- - Open sales orders - - - Open shipments - - - Open inventory - - - Open purchasing - - - Open projects - - - Open manufacturing - - {canReadPlanning ? ( - - Open planning - - ) : null} -
- {error ?
{error}
: null} -
-
-
-

Upgrade Path

-
- {futureModules.map((item) => ( -
- {item} -
- ))} -
-
-
-
+ {error ?
{error}
: null}
{metricCards.map((card) => ( -
+

{card.label}

{card.value}
- Live + Live
-

{card.detail}

))}
{modulePanels.map((panel) => ( -
-

{panel.eyebrow}

-

{panel.title}

-

{panel.summary}

-
+
+

{panel.title}

+
{panel.metrics.map((metric) => ( -
+
{metric.label} {metric.value}
@@ -550,131 +360,124 @@ export function DashboardPage() { ))}
-
-

Planning Watch

-

Shared shortage and readiness

+
+

Planning

-
+
Shortage items {planningRollup ? `${shortageItemCount}` : "No access"}
-
+
Build recommendations {planningRollup ? `${buildRecommendationCount}` : "No access"}
-
+
Buy recommendations {planningRollup ? `${buyRecommendationCount}` : "No access"}
-
+
Uncovered qty {planningRollup ? `${totalUncoveredQuantity}` : "No access"}
-
-

Inventory Watch

-

Master data pressure points

+
+

Inventory

-
+
Obsolete items {snapshot?.items !== null ? `${obsoleteItemCount}` : "No access"}
-
+
Warehouse count {snapshot?.warehouses !== null ? `${warehouseCount}` : "No access"}
-
+
Stock locations {snapshot?.warehouses !== null ? `${locationCount}` : "No access"}
-
-

Sales Watch

-

Commercial flow snapshot

+
+

Sales

-
+
Issued orders {snapshot?.orders !== null ? `${issuedOrderCount}` : "No access"}
-
+
Draft quotes {snapshot?.quotes !== null ? `${draftQuoteCount}` : "No access"}
-
+
Order backlog {snapshot?.orders !== null ? formatCurrency(orderValue) : "No access"}
-
-

Purchasing Watch

-

Inbound supply and commitment load

+
+

Purchasing

-
+
Total purchase orders {snapshot?.purchaseOrders !== null ? `${purchaseOrderCount}` : "No access"}
-
+
Open queue {snapshot?.purchaseOrders !== null ? `${openPurchaseOrderCount}` : "No access"}
-
+
Committed value {snapshot?.purchaseOrders !== null ? formatCurrency(purchaseOrderValue) : "No access"}
-
-

Manufacturing Watch

-

Build execution and due-date pressure

+
+

Manufacturing

-
+
Total work orders {snapshot?.workOrders !== null ? `${workOrderCount}` : "No access"}
-
+
Active queue {snapshot?.workOrders !== null ? `${activeWorkOrderCount}` : "No access"}
-
+
Overdue {snapshot?.workOrders !== null ? `${overdueWorkOrderCount}` : "No access"}
-
-

Project Watch

-

Program status and delivery pressure

+
+

Projects

-
+
Total projects {snapshot?.projects !== null ? `${projectCount}` : "No access"}
-
+
At risk {snapshot?.projects !== null ? `${atRiskProjectCount}` : "No access"}
-
+
Overdue {snapshot?.projects !== null ? `${overdueProjectCount}` : "No access"}
-
-

Shipping Watch

-

Execution and delivery status

+
+

Shipping

-
+
Total shipments {snapshot?.shipments !== null ? `${shipmentCount}` : "No access"}
-
+
Open queue {snapshot?.shipments !== null ? `${activeShipmentCount}` : "No access"}
-
+
Delivered {snapshot?.shipments !== null ? `${deliveredCount}` : "No access"}