@wealthx/shadcn 1.2.2 → 1.3.1

package/src/components/ui/backoffice-alerts-chart.tsx

@@ -0,0 +1,312 @@
+import React, { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+  type ChartOptions,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { BarChart2, LineChart } from "lucide-react";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  FALLBACK_TICK,
+  hexToRgba,
+  formatTooltipDate,
+  formatMonthLabel,
+  formatCount,
+  ChartLegendItem,
+  ChartPeriodButton,
+} from "./chart-shared";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AlertSummaryDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  /** Count of Need Action alerts */
+  needAction: number;
+  /** Count of Watch alerts */
+  watch: number;
+  /** Count of Insight alerts */
+  insight: number;
+}
+
+export type AlertSummaryPeriod = 3 | 6 | 12;
+type AlertChartType = "line" | "bar";
+
+export interface BackofficeAlertsChartProps {
+  chartData?: AlertSummaryDataPoint[] | null;
+  title?: string;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom";
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  defaultPeriod?: AlertSummaryPeriod;
+  height?: number;
+  width?: number | string;
+  className?: string;
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PERIODS: AlertSummaryPeriod[] = [3, 6, 12];
+const SLICE_COUNT: Record<AlertSummaryPeriod, number> = { 3: 3, 6: 6, 12: 12 };
+
+const NEED_ACTION_COLOR = "#F44336";
+const WATCH_COLOR = "#FF9800";
+const INSIGHT_COLOR = "#3B82F6";
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+function AlertsLegend() {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <ChartLegendItem
+        label="Need Action"
+        color={NEED_ACTION_COLOR}
+        lineStyle="solid"
+      />
+      <ChartLegendItem label="Watch" color={WATCH_COLOR} lineStyle="solid" />
+      <ChartLegendItem
+        label="Insight"
+        color={INSIGHT_COLOR}
+        lineStyle="solid"
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function BackofficeAlertsChart({
+  chartData,
+  title = "Alerts Summary",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: BackofficeAlertsChartProps) {
+  const [period, setPeriod] = useState<AlertSummaryPeriod>(defaultPeriod);
+  const [chartType, setChartType] = useState<AlertChartType>("line");
+
+  const themeVars = useThemeVars();
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<AlertSummaryDataPoint[] | null>(() => {
+    if (!chartData?.length) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+
+  const labels = useMemo(
+    () => sliced?.map((p) => formatMonthLabel(p.date)) ?? [],
+    [sliced],
+  );
+
+  const isBar = chartType === "bar";
+
+  const datasets = useMemo(() => {
+    if (!sliced) return [];
+    return [
+      {
+        type: chartType,
+        label: "Need Action",
+        data: sliced.map((p) => p.needAction),
+        borderColor: NEED_ACTION_COLOR,
+        backgroundColor: isBar
+          ? NEED_ACTION_COLOR
+          : hexToRgba(NEED_ACTION_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Watch",
+        data: sliced.map((p) => p.watch),
+        borderColor: WATCH_COLOR,
+        backgroundColor: isBar ? WATCH_COLOR : hexToRgba(WATCH_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Insight",
+        data: sliced.map((p) => p.insight),
+        borderColor: INSIGHT_COLOR,
+        backgroundColor: isBar ? INSIGHT_COLOR : hexToRgba(INSIGHT_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+    ];
+  }, [sliced, chartType, isBar]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 300 },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              const idx = tooltipItems[0]?.dataIndex;
+              if (idx != null && sliced?.[idx]?.date) {
+                return formatTooltipDate(sliced[idx].date, "monthly");
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: ${formatCount(val)}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+          },
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          beginAtZero: true,
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatCount(Number(v)),
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
+        <CardAction>
+          <div className="flex items-center gap-2">
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              size="sm"
+              value={chartType}
+              onValueChange={(v) => v && setChartType(v as AlertChartType)}
+            >
+              <ToggleGroupItem value="line" aria-label="Line chart">
+                <LineChart className="size-3.5" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="bar" aria-label="Bar chart">
+                <BarChart2 className="size-3.5" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+            <div className="flex gap-0.5 sm:gap-1">
+              {PERIODS.map((p) => (
+                <ChartPeriodButton
+                  key={p}
+                  period={p}
+                  active={period === p}
+                  onClick={() => setPeriod(p)}
+                />
+              ))}
+            </div>
+          </div>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !sliced ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && <AlertsLegend />}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+              <Chart
+                key={chartType}
+                type={chartType as any}
+                data={{ labels, datasets } as any}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && <AlertsLegend />}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/backoffice-connections-chart.tsx

@@ -0,0 +1,339 @@
+import React, { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+  type ChartOptions,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { BarChart2, LineChart } from "lucide-react";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  FALLBACK_TICK,
+  hexToRgba,
+  formatTooltipDate,
+  formatMonthLabel,
+  formatCount,
+  ChartLegendItem,
+  ChartPeriodButton,
+} from "./chart-shared";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ConnectionSummaryDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  /** Total contact count */
+  all: number;
+  /** Contacts with bank connected */
+  bankConnected: number;
+  /** Contacts with property connected */
+  propertyConnected: number;
+  /** Contacts with no connection */
+  notConnected: number;
+}
+
+export type ConnectionSummaryPeriod = 3 | 6 | 12;
+type ConnectionChartType = "line" | "bar";
+
+export interface BackofficeConnectionsChartProps {
+  chartData?: ConnectionSummaryDataPoint[] | null;
+  title?: string;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom";
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  defaultPeriod?: ConnectionSummaryPeriod;
+  height?: number;
+  width?: number | string;
+  className?: string;
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PERIODS: ConnectionSummaryPeriod[] = [3, 6, 12];
+const SLICE_COUNT: Record<ConnectionSummaryPeriod, number> = {
+  3: 3,
+  6: 6,
+  12: 12,
+};
+
+const ALL_COLOR = "#040D13";
+const BANK_COLOR = "#33FF99";
+const PROPERTY_COLOR = "#3B82F6";
+const NONE_COLOR = "#9EAAB5";
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+function ConnectionsLegend() {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <ChartLegendItem
+        label="All Contacts"
+        color={ALL_COLOR}
+        lineStyle="solid"
+      />
+      <ChartLegendItem
+        label="Bank Connected"
+        color={BANK_COLOR}
+        lineStyle="solid"
+      />
+      <ChartLegendItem
+        label="Property Connected"
+        color={PROPERTY_COLOR}
+        lineStyle="solid"
+      />
+      <ChartLegendItem
+        label="Not Connected"
+        color={NONE_COLOR}
+        lineStyle="solid"
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function BackofficeConnectionsChart({
+  chartData,
+  title = "Contacts and Connections",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: BackofficeConnectionsChartProps) {
+  const [period, setPeriod] = useState<ConnectionSummaryPeriod>(defaultPeriod);
+  const [chartType, setChartType] = useState<ConnectionChartType>("line");
+
+  const themeVars = useThemeVars();
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<ConnectionSummaryDataPoint[] | null>(() => {
+    if (!chartData?.length) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+
+  const labels = useMemo(
+    () => sliced?.map((p) => formatMonthLabel(p.date)) ?? [],
+    [sliced],
+  );
+
+  const isBar = chartType === "bar";
+
+  const datasets = useMemo(() => {
+    if (!sliced) return [];
+    return [
+      {
+        type: chartType,
+        label: "All Contacts",
+        data: sliced.map((p) => p.all),
+        borderColor: ALL_COLOR,
+        backgroundColor: isBar ? ALL_COLOR : hexToRgba(ALL_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Bank Connected",
+        data: sliced.map((p) => p.bankConnected),
+        borderColor: BANK_COLOR,
+        backgroundColor: isBar ? BANK_COLOR : hexToRgba(BANK_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Property Connected",
+        data: sliced.map((p) => p.propertyConnected),
+        borderColor: PROPERTY_COLOR,
+        backgroundColor: isBar
+          ? PROPERTY_COLOR
+          : hexToRgba(PROPERTY_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Not Connected",
+        data: sliced.map((p) => p.notConnected),
+        borderColor: NONE_COLOR,
+        backgroundColor: isBar ? NONE_COLOR : hexToRgba(NONE_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+    ];
+  }, [sliced, chartType, isBar]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 300 },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              const idx = tooltipItems[0]?.dataIndex;
+              if (idx != null && sliced?.[idx]?.date) {
+                return formatTooltipDate(sliced[idx].date, "monthly");
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: ${formatCount(val)}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+          },
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          beginAtZero: true,
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatCount(Number(v)),
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
+        <CardAction>
+          <div className="flex items-center gap-2">
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              size="sm"
+              value={chartType}
+              onValueChange={(v) => v && setChartType(v as ConnectionChartType)}
+            >
+              <ToggleGroupItem value="line" aria-label="Line chart">
+                <LineChart className="size-3.5" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="bar" aria-label="Bar chart">
+                <BarChart2 className="size-3.5" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+            <div className="flex gap-0.5 sm:gap-1">
+              {PERIODS.map((p) => (
+                <ChartPeriodButton
+                  key={p}
+                  period={p}
+                  active={period === p}
+                  onClick={() => setPeriod(p)}
+                />
+              ))}
+            </div>
+          </div>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !sliced ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && <ConnectionsLegend />}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+              <Chart
+                key={chartType}
+                type={chartType as any}
+                data={{ labels, datasets } as any}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && <ConnectionsLegend />}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/backoffice-contact-history-chart.tsx

@@ -26,7 +26,13 @@ import {
   ChartPeriodButton,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip,
+);
 
 // ---------------------------------------------------------------------------
 // Types
@@ -267,7 +273,9 @@ export function BackofficeContactHistoryChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
         <CardAction>
           <div className="flex gap-0.5 sm:gap-1">
             {CONTACT_PERIODS.map((p) => (

package/src/components/ui/badge.tsx

@@ -10,19 +10,25 @@ import { Slot } from "@/lib/slot";
  * Figma: Design-System---shadcn?node-id=665-2024
  *
  * WealthX: added font-sans. Extended with success/warning/info semantic variants.
+ * Semantic variants use a tinted outline style: bg-X/10 + border-X/40 + text-X-text.
+ * This gives softer, more readable badges and works correctly in light and dark mode.
  */
 const badgeVariants = cva(
   "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
+        default:
+          "border-primary/40 bg-primary/10 text-foreground [a&]:hover:bg-primary/15",
+        secondary:
+          "border-border bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
         destructive:
-          "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-        success: "bg-success text-success-foreground [a&]:hover:bg-success/90",
-        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
-        info: "bg-info text-info-foreground [a&]:hover:bg-info/90",
+          "border-destructive/40 bg-destructive/10 text-destructive-text focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/15",
+        success:
+          "border-success/40 bg-success/10 text-success-text [a&]:hover:bg-success/15",
+        warning:
+          "border-warning/40 bg-warning/10 text-warning-text [a&]:hover:bg-warning/15",
+        info: "border-info/40 bg-info/10 text-info-text [a&]:hover:bg-info/15",
         outline:
           "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",