@squadbase/vantage 0.0.1 → 0.1.1

package/registry/blocks/sales-overview.tsx

@@ -1,5 +1,11 @@
 // Copied by `vantage add block sales-overview`. This file is yours to edit.
-import { BarChart, Card, CardContent, CardHeader, CardTitle, MetricCard } from "@squadbase/vantage/ui"
+import {
+  DashboardCardPreset,
+  EChart,
+  MetricValue,
+  TrendIndicator,
+  type EChartsOption,
+} from "@squadbase/vantage/components"
 
 export interface SalesOverviewProps {
   totalRevenue: string
@@ -10,28 +16,46 @@ export interface SalesOverviewProps {
 
 /** A composed dashboard section: KPI row + revenue vs. target chart. */
 export function SalesOverview({ totalRevenue, orders, revenueDelta, monthly }: SalesOverviewProps) {
+  const avgOrder = Math.round(
+    (Number(totalRevenue.replace(/[^0-9.]/g, "")) || 0) / Math.max(1, orders),
+  )
+
+  // Annotate the option — without it TypeScript widens `type: "category"` to
+  // `string` and ECharts rejects it.
+  const option: EChartsOption = {
+    tooltip: { trigger: "axis" },
+    legend: { data: ["Revenue", "Target"], top: 0 },
+    grid: { left: 8, right: 8, top: 40, bottom: 8, containLabel: true },
+    xAxis: { type: "category", data: monthly.map((m) => m.month) },
+    yAxis: { type: "value" },
+    series: [
+      { name: "Revenue", type: "bar", data: monthly.map((m) => m.revenue) },
+      { name: "Target", type: "bar", data: monthly.map((m) => m.target) },
+    ],
+  }
+
   return (
     <section className="flex flex-col gap-4">
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <MetricCard label="Revenue" value={totalRevenue} delta={revenueDelta} />
-        <MetricCard label="Orders" value={orders.toLocaleString()} />
-        <MetricCard label="Avg. order" value={`$${Math.round((Number(totalRevenue.replace(/[^0-9.]/g, "")) || 0) / Math.max(1, orders))}`} />
+        <DashboardCardPreset title="Revenue">
+          <MetricValue className="my-0">{totalRevenue}</MetricValue>
+          {revenueDelta !== undefined && (
+            <TrendIndicator
+              value={Math.abs(revenueDelta)}
+              direction={revenueDelta >= 0 ? "up" : "down"}
+            />
+          )}
+        </DashboardCardPreset>
+        <DashboardCardPreset title="Orders">
+          <MetricValue className="my-0">{orders.toLocaleString()}</MetricValue>
+        </DashboardCardPreset>
+        <DashboardCardPreset title="Avg. order">
+          <MetricValue className="my-0">${avgOrder}</MetricValue>
+        </DashboardCardPreset>
       </div>
-      <Card>
-        <CardHeader>
-          <CardTitle>Revenue vs. target</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BarChart
-            data={monthly}
-            categoryKey="month"
-            series={[
-              { key: "revenue", label: "Revenue" },
-              { key: "target", label: "Target" },
-            ]}
-          />
-        </CardContent>
-      </Card>
+      <DashboardCardPreset title="Revenue vs. target">
+        <EChart option={option} height={320} ariaLabel="Revenue vs. target by month" />
+      </DashboardCardPreset>
     </section>
   )
 }