randmarcomps 1.126.0 → 1.127.0

package/dist/randmarcomps.d.ts

@@ -23,6 +23,7 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { Reseller } from 'randmar-api-client';
 import { SalesData } from 'randmar-api-client';
+import { SalesStatistic } from 'randmar-api-client';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -354,10 +355,11 @@ declare interface ResellerQualificationsCardProps {
     loading?: boolean;
 }
 
-export declare function SalesOverviewCard({ salesData, loading }: SalesOverviewCardProps): JSX.Element;
+export declare function SalesOverviewCard({ salesData, salesStatistics, loading }: SalesOverviewCardProps): JSX.Element;
 
 declare interface SalesOverviewCardProps {
     salesData?: SalesData;
+    salesStatistics?: SalesStatistic[];
     loading?: boolean;
 }
 

package/dist/randmarcomps.js

@@ -54511,53 +54511,93 @@ function ActiveOrdersCard({ orders: t, loading: e = !1 }) {
     ] }, l.name)) })
   ] });
 }
-function SalesOverviewCard({ salesData: t, loading: e = !1 }) {
-  const n = (o) => new Intl.NumberFormat("en-CA", {
+function SalesOverviewCard({ salesData: t, salesStatistics: e = [], loading: n = !1 }) {
+  return n || !t ? /* @__PURE__ */ jsx(SalesOverviewSkeleton, {}) : /* @__PURE__ */ jsx(SalesOverviewData, { salesData: t, salesStatistics: e });
+}
+function SalesOverviewSkeleton() {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "pb-0", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg sm:text-xl", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-40" }) }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "pt-4 px-3 sm:px-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: Array(3).fill(0).map((t, e) => /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-24" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9 rounded-full" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20 mb-1" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-28" })
+        ] })
+      ] }, e)) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[250px] w-full rounded-lg" })
+      ] }) })
+    ] })
+  ] });
+}
+function SalesOverviewData({
+  salesData: t,
+  salesStatistics: e = []
+}) {
+  const n = (l) => new Intl.NumberFormat("en-CA", {
     style: "currency",
     currency: "CAD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
-  }).format(o), i = [
+  }).format(l), i = [
     {
       title: "Last 30 days",
-      amount: (t == null ? void 0 : t.SalesLast30Days) || 0,
+      amount: t.SalesLast30Days || 0,
       icon: /* @__PURE__ */ jsx(Calendar, { className: "h-5 w-5 text-white" }),
       color: "bg-blue-500"
     },
     {
       title: "Last 3 months",
-      amount: (t == null ? void 0 : t.SalesLast3Months) || 0,
+      amount: t.SalesLast3Months || 0,
       icon: /* @__PURE__ */ jsx(Calendar, { className: "h-5 w-5 text-white" }),
       color: "bg-amber-500"
     },
     {
       title: "Year to date",
-      amount: (t == null ? void 0 : t.SalesYearToDay) || 0,
+      amount: t.SalesYearToDay || 0,
       icon: /* @__PURE__ */ jsx(Calendar, { className: "h-5 w-5 text-white" }),
       color: "bg-emerald-500"
     }
-  ];
+  ], o = e.sort((l, u) => (l.Day || 0) - (u.Day || 0)).map((l) => {
+    var m;
+    const u = ((m = l.Day) == null ? void 0 : m.toString()) || "", d = u.substring(4, 6), f = u.substring(6, 8);
+    return {
+      date: `${d}/${f}`,
+      amount: l.ExtendedPrice || 0,
+      quantity: l.Quantity || 0
+    };
+  });
   return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "pb-0", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg sm:text-xl", children: "Sales Overview" }) }),
-    /* @__PURE__ */ jsx(CardContent, { className: "pt-4 px-3 sm:px-6", children: e || !t ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: Array(3).fill(0).map((o, l) => /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-24" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-9 rounded-full" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20 mb-1" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-28" })
-      ] })
-    ] }, l)) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: i.map((o, l) => /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm sm:text-base font-medium", children: o.title }),
-        /* @__PURE__ */ jsx("div", { className: `p-2 rounded-full ${o.color}`, children: o.icon })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Total Amount" }),
-        /* @__PURE__ */ jsx("p", { className: "text-base sm:text-lg font-bold", children: n(o.amount) })
-      ] })
-    ] }, l)) }) })
+    /* @__PURE__ */ jsxs(CardContent, { className: "pt-4 px-3 sm:px-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: i.map((l, u) => /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm sm:text-base font-medium", children: l.title }),
+          /* @__PURE__ */ jsx("div", { className: `p-2 rounded-full ${l.color}`, children: l.icon })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Total Amount" }),
+          /* @__PURE__ */ jsx("p", { className: "text-base sm:text-lg font-bold", children: n(l.amount) })
+        ] })
+      ] }, u)) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6", children: e && e.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-4", children: "Sales Trend" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsx(
+          AreaChart,
+          {
+            data: o,
+            units: "$",
+            unitsPosition: "left",
+            height: 200
+          }
+        ) })
+      ] }) })
+    ] })
   ] });
 }
 function ResellerQualificationsCard({ qualifications: t = [], loading: e = !1 }) {