@freighttech/ui 0.13.18

package/dist/backend/charts/ComboChart.stories.js

@@ -0,0 +1,88 @@
+import { ComboChart } from "./ComboChart.js";
+const meta = {
+  title: "Charts/ComboChart",
+  component: ComboChart,
+  parameters: {
+    layout: "padded"
+  }
+};
+var ComboChart_stories_default = meta;
+const NAVY = "#1C3F6E";
+const BLUE = "#2B5896";
+const PLAN_GRAY = "#4A4A4A";
+const CORE_NAVY = "#16335C";
+const NONCORE_BLUE = "#6E8CB5";
+const PL_MONTHS = ["Sty", "Lut", "Mar", "Kwi", "Maj", "Cze", "Lip", "Sie", "Wrz", "Pa\u017A", "Lis", "Gru"];
+const fmtPln = (v) => {
+  if (Math.abs(v) >= 1e6) return `${(v / 1e6).toFixed(1)} mln z\u0142`;
+  if (Math.abs(v) >= 1e3) return `${Math.round(v / 1e3)} tys. z\u0142`;
+  return `${v} z\u0142`;
+};
+const fmtPct = (v) => `${v}%`;
+const ebitdaData = [
+  { month: "Sty", actual: -32110, plan: -2e4, forecast: null, fcMin: null, fcMax: null },
+  { month: "Lut", actual: -4160, plan: 5e3, forecast: null, fcMin: null, fcMax: null },
+  { month: "Mar", actual: 65696, plan: 4e4, forecast: null, fcMin: null, fcMax: null },
+  { month: "Kwi", actual: 146837, plan: 9e4, forecast: 146837, fcMin: 146837, fcMax: 146837 },
+  { month: "Maj", actual: null, plan: 11e4, forecast: 15e4, fcMin: 12e4, fcMax: 18e4 },
+  { month: "Cze", actual: null, plan: 13e4, forecast: 165e3, fcMin: 125e3, fcMax: 205e3 },
+  { month: "Lip", actual: null, plan: 15e4, forecast: 178e3, fcMin: 13e4, fcMax: 226e3 },
+  { month: "Sie", actual: null, plan: 165e3, forecast: 188e3, fcMin: 135e3, fcMax: 241e3 },
+  { month: "Wrz", actual: null, plan: 18e4, forecast: 196e3, fcMin: 138e3, fcMax: 254e3 },
+  { month: "Pa\u017A", actual: null, plan: 195e3, forecast: 205e3, fcMin: 142e3, fcMax: 268e3 },
+  { month: "Lis", actual: null, plan: 208e3, forecast: 213e3, fcMin: 146e3, fcMax: 28e4 },
+  { month: "Gru", actual: null, plan: 22e4, forecast: 222e3, fcMin: 15e4, fcMax: 294e3 }
+];
+const EbitdaPlanActualForecast = {
+  args: {
+    title: "EBITDA: wykonanie vs plan vs prognoza",
+    data: ebitdaData,
+    index: "month",
+    referenceY: 0,
+    leftFormatter: fmtPln,
+    band: { minKey: "fcMin", maxKey: "fcMax", color: BLUE, name: "Przedzia\u0142 prognozy" },
+    series: [
+      { key: "actual", name: "Wykonanie", type: "bar", color: NAVY },
+      { key: "plan", name: "Plan", type: "line", color: PLAN_GRAY, dashStyle: "ShortDash" },
+      { key: "forecast", name: "Prognoza", type: "line", color: BLUE, dashStyle: "Dash" }
+    ],
+    markers: [{ xValue: "Kwi", yValue: 146837, label: "Teraz", color: NAVY }]
+  }
+};
+const coreSplitData = [
+  { month: "Sty", core: 62e4, nonCore: 36e4, nonCorePct: 37 },
+  { month: "Lut", core: 54e4, nonCore: 52e4, nonCorePct: 49 },
+  { month: "Mar", core: 7e5, nonCore: 98e4, nonCorePct: 58 },
+  { month: "Kwi", core: 48e4, nonCore: 83e4, nonCorePct: 63 }
+];
+const CoreNonCoreStacked = {
+  args: {
+    title: "Struktura sprzeda\u017Cy: CORE vs NON-CORE",
+    data: coreSplitData,
+    index: "month",
+    leftFormatter: fmtPln,
+    rightFormatter: fmtPct,
+    rightDomain: [0, 100],
+    series: [
+      { key: "core", name: "CORE (TWARGUM)", type: "bar", color: CORE_NAVY, stackId: "sprzedaz" },
+      { key: "nonCore", name: "NON-CORE", type: "bar", color: NONCORE_BLUE, stackId: "sprzedaz" },
+      { key: "nonCorePct", name: "Udzia\u0142 NON-CORE %", type: "line", color: BLUE, yAxis: "right" }
+    ]
+  }
+};
+const Loading = {
+  args: {
+    title: "EBITDA: wykonanie vs plan vs prognoza",
+    data: [],
+    index: "month",
+    series: [],
+    loading: true
+  }
+};
+export {
+  CoreNonCoreStacked,
+  EbitdaPlanActualForecast,
+  Loading,
+  ComboChart_stories_default as default
+};
+//# sourceMappingURL=ComboChart.stories.js.map

package/dist/backend/charts/ComboChart.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/ComboChart.stories.tsx"],
+  "sourcesContent": ["// ComboChart.stories.tsx\n\nimport React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { ComboChart } from './ComboChart'\n\nconst meta: Meta<typeof ComboChart> = {\n  title: 'Charts/ComboChart',\n  component: ComboChart,\n  parameters: {\n    layout: 'padded',\n  },\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof ComboChart>\n\n// Verbatim PoC palette (do not eyeball \u2014 see IMPLEMENTATION-BRIEF.md).\nconst NAVY = '#1C3F6E'\nconst BLUE = '#2B5896'\nconst PLAN_GRAY = '#4A4A4A'\nconst CORE_NAVY = '#16335C'\nconst NONCORE_BLUE = '#6E8CB5'\n\nconst PL_MONTHS = ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Pa\u017A', 'Lis', 'Gru']\n\nconst fmtPln = (v: number): string => {\n  if (Math.abs(v) >= 1_000_000) return `${(v / 1_000_000).toFixed(1)} mln z\u0142`\n  if (Math.abs(v) >= 1_000) return `${Math.round(v / 1_000)} tys. z\u0142`\n  return `${v} z\u0142`\n}\nconst fmtPct = (v: number): string => `${v}%`\n\n// Chart 1/6 \u2014 EBITDA: wykonanie vs plan vs prognoza.\n// Sty\u2013Kwi actuals; Maj\u2013Gru plan + forecast spline with an uncertainty band.\n// Band keys are null for past months so no band is drawn there.\nconst ebitdaData = [\n  { month: 'Sty', actual: -32110, plan: -20000, forecast: null, fcMin: null, fcMax: null },\n  { month: 'Lut', actual: -4160, plan: 5000, forecast: null, fcMin: null, fcMax: null },\n  { month: 'Mar', actual: 65696, plan: 40000, forecast: null, fcMin: null, fcMax: null },\n  { month: 'Kwi', actual: 146837, plan: 90000, forecast: 146837, fcMin: 146837, fcMax: 146837 },\n  { month: 'Maj', actual: null, plan: 110000, forecast: 150000, fcMin: 120000, fcMax: 180000 },\n  { month: 'Cze', actual: null, plan: 130000, forecast: 165000, fcMin: 125000, fcMax: 205000 },\n  { month: 'Lip', actual: null, plan: 150000, forecast: 178000, fcMin: 130000, fcMax: 226000 },\n  { month: 'Sie', actual: null, plan: 165000, forecast: 188000, fcMin: 135000, fcMax: 241000 },\n  { month: 'Wrz', actual: null, plan: 180000, forecast: 196000, fcMin: 138000, fcMax: 254000 },\n  { month: 'Pa\u017A', actual: null, plan: 195000, forecast: 205000, fcMin: 142000, fcMax: 268000 },\n  { month: 'Lis', actual: null, plan: 208000, forecast: 213000, fcMin: 146000, fcMax: 280000 },\n  { month: 'Gru', actual: null, plan: 220000, forecast: 222000, fcMin: 150000, fcMax: 294000 },\n]\n\nexport const EbitdaPlanActualForecast: Story = {\n  args: {\n    title: 'EBITDA: wykonanie vs plan vs prognoza',\n    data: ebitdaData,\n    index: 'month',\n    referenceY: 0,\n    leftFormatter: fmtPln,\n    band: { minKey: 'fcMin', maxKey: 'fcMax', color: BLUE, name: 'Przedzia\u0142 prognozy' },\n    series: [\n      { key: 'actual', name: 'Wykonanie', type: 'bar', color: NAVY },\n      { key: 'plan', name: 'Plan', type: 'line', color: PLAN_GRAY, dashStyle: 'ShortDash' },\n      { key: 'forecast', name: 'Prognoza', type: 'line', color: BLUE, dashStyle: 'Dash' },\n    ],\n    markers: [{ xValue: 'Kwi', yValue: 146837, label: 'Teraz', color: NAVY }],\n  },\n}\n\n// Chart 4 \u2014 Struktura sprzeda\u017Cy: CORE vs NON-CORE.\n// Stacked monthly columns + a NON-CORE share % line on the right axis.\nconst coreSplitData = [\n  { month: 'Sty', core: 620000, nonCore: 360000, nonCorePct: 37 },\n  { month: 'Lut', core: 540000, nonCore: 520000, nonCorePct: 49 },\n  { month: 'Mar', core: 700000, nonCore: 980000, nonCorePct: 58 },\n  { month: 'Kwi', core: 480000, nonCore: 830000, nonCorePct: 63 },\n]\n\nexport const CoreNonCoreStacked: Story = {\n  args: {\n    title: 'Struktura sprzeda\u017Cy: CORE vs NON-CORE',\n    data: coreSplitData,\n    index: 'month',\n    leftFormatter: fmtPln,\n    rightFormatter: fmtPct,\n    rightDomain: [0, 100],\n    series: [\n      { key: 'core', name: 'CORE (TWARGUM)', type: 'bar', color: CORE_NAVY, stackId: 'sprzedaz' },\n      { key: 'nonCore', name: 'NON-CORE', type: 'bar', color: NONCORE_BLUE, stackId: 'sprzedaz' },\n      { key: 'nonCorePct', name: 'Udzia\u0142 NON-CORE %', type: 'line', color: BLUE, yAxis: 'right' },\n    ],\n  },\n}\n\nexport const Loading: Story = {\n  args: {\n    title: 'EBITDA: wykonanie vs plan vs prognoza',\n    data: [],\n    index: 'month',\n    series: [],\n    loading: true,\n  },\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/charts/KpiCard.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+function defaultFormatValue(value) {
+  if (Math.abs(value) >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (Math.abs(value) >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+}
+function formatPercentageChange(value) {
+  const formatted = Math.abs(value).toFixed(1);
+  return `${formatted}%`;
+}
+function BadgeDelta({ direction, value }) {
+  const baseClasses = "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium";
+  const directionClasses = {
+    up: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+    down: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+    unchanged: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400"
+  };
+  const icons = {
+    up: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 10l7-7m0 0l7 7m-7-7v18" }) }),
+    down: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }),
+    unchanged: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `${baseClasses} ${directionClasses[direction]}`,
+      title: "Compared to previous period",
+      children: [
+        icons[direction],
+        formatPercentageChange(value)
+      ]
+    }
+  );
+}
+function KpiCard({
+  title,
+  value,
+  trend,
+  comparisonLabel,
+  loading,
+  error,
+  formatValue = defaultFormatValue,
+  prefix = "",
+  suffix = "",
+  className = "",
+  headerAction
+}) {
+  const hasWrapper = !!title;
+  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className;
+  const headerRow = title || headerAction ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
+    title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: title }),
+    headerAction
+  ] }) : null;
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      headerRow,
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      headerRow,
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+    ] });
+  }
+  if (value === null) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      headerRow,
+      /* @__PURE__ */ jsx("p", { className: "text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground", children: "--" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    headerRow,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground", children: [
+        prefix,
+        formatValue(value),
+        suffix
+      ] }),
+      trend && /* @__PURE__ */ jsx(BadgeDelta, { direction: trend.direction, value: trend.value })
+    ] }),
+    trend && comparisonLabel && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: comparisonLabel })
+  ] });
+}
+var KpiCard_default = KpiCard;
+export {
+  KpiCard,
+  KpiCard_default as default
+};
+//# sourceMappingURL=KpiCard.js.map

package/dist/backend/charts/KpiCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/KpiCard.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\n\nexport type KpiTrend = {\n  value: number\n  direction: 'up' | 'down' | 'unchanged'\n}\n\nexport type KpiCardProps = {\n  title?: string\n  value: number | null\n  trend?: KpiTrend\n  comparisonLabel?: string\n  loading?: boolean\n  error?: string | null\n  formatValue?: (value: number) => string\n  prefix?: string\n  suffix?: string\n  className?: string\n  headerAction?: React.ReactNode\n}\n\nfunction defaultFormatValue(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nfunction formatPercentageChange(value: number): string {\n  const formatted = Math.abs(value).toFixed(1)\n  return `${formatted}%`\n}\n\ntype BadgeDeltaProps = {\n  direction: 'up' | 'down' | 'unchanged'\n  value: number\n}\n\nfunction BadgeDelta({ direction, value }: BadgeDeltaProps) {\n  const baseClasses = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium'\n\n  const directionClasses = {\n    up: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',\n    down: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',\n    unchanged: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',\n  }\n\n  const icons = {\n    up: (\n      <svg className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 10l7-7m0 0l7 7m-7-7v18\" />\n      </svg>\n    ),\n    down: (\n      <svg className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" />\n      </svg>\n    ),\n    unchanged: (\n      <svg className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n      </svg>\n    ),\n  }\n\n  return (\n    <span\n      className={`${baseClasses} ${directionClasses[direction]}`}\n      title=\"Compared to previous period\"\n    >\n      {icons[direction]}\n      {formatPercentageChange(value)}\n    </span>\n  )\n}\n\nexport function KpiCard({\n  title,\n  value,\n  trend,\n  comparisonLabel,\n  loading,\n  error,\n  formatValue = defaultFormatValue,\n  prefix = '',\n  suffix = '',\n  className = '',\n  headerAction,\n}: KpiCardProps) {\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  const headerRow = (title || headerAction) ? (\n    <div className=\"flex items-center justify-between gap-2 mb-2\">\n      {title && <p className=\"text-sm font-medium text-muted-foreground\">{title}</p>}\n      {headerAction}\n    </div>\n  ) : null\n\n  if (error) {\n    return (\n      <div className={wrapperClass}>\n        {headerRow}\n        <p className=\"text-sm text-destructive\">{error}</p>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={wrapperClass}>\n        {headerRow}\n        <div className=\"flex items-center justify-center py-4\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (value === null) {\n    return (\n      <div className={wrapperClass}>\n        {headerRow}\n        <p className=\"text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground\">--</p>\n      </div>\n    )\n  }\n\n  return (\n    <div className={wrapperClass}>\n      {headerRow}\n      <div className=\"flex items-baseline gap-3\">\n        <p className=\"text-2xl sm:text-3xl font-semibold tracking-tight text-card-foreground\">\n          {prefix}\n          {formatValue(value)}\n          {suffix}\n        </p>\n        {trend && (\n          <BadgeDelta direction={trend.direction} value={trend.value} />\n        )}\n      </div>\n      {trend && comparisonLabel && (\n        <p className=\"mt-1 text-xs text-muted-foreground\">{comparisonLabel}</p>\n      )}\n    </div>\n  )\n}\n\nexport default KpiCard\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/charts/LineChart.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  LineChart as RechartsLineChart,
+  AreaChart as RechartsAreaChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend
+} from "recharts";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+const DASH_ARRAY = {
+  solid: void 0,
+  ShortDash: "6 3",
+  Dash: "8 5",
+  Dot: "2 4"
+};
+function defaultValueFormatter(value) {
+  if (Math.abs(value) >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (Math.abs(value) >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+}
+function LineChart({
+  title,
+  data,
+  index,
+  categories,
+  loading,
+  error,
+  colors,
+  showArea = false,
+  valueFormatter = defaultValueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  curveType = "monotone",
+  connectNulls = true,
+  className = "",
+  emptyMessage = "No data available",
+  categoryLabels,
+  seriesDash
+}) {
+  const getLineColor = (idx) => {
+    return resolveChartColor(colors?.[idx], idx);
+  };
+  const getLineDash = (category) => {
+    const style = seriesDash?.[category];
+    return style ? DASH_ARRAY[style] : void 0;
+  };
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }) })
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+    ] });
+  }
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
+    ] });
+  }
+  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart;
+  return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card p-4 ${className}`, children: [
+    title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      ChartComponent,
+      {
+        data,
+        margin: { top: 5, right: 10, left: 10, bottom: 5 },
+        children: [
+          showGridLines && /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              stroke: "hsl(var(--border))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: index,
+              tick: { fontSize: 12 },
+              tickLine: false,
+              axisLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              tickFormatter: valueFormatter,
+              tick: { fontSize: 12 },
+              tickLine: false,
+              axisLine: false,
+              width: 56
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter, categoryLabels }),
+              cursor: { stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }
+            }
+          ),
+          showLegend && categories.length > 1 && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: "top",
+              height: 36,
+              formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
+            }
+          ),
+          showArea ? categories.map((category, idx) => /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: curveType,
+              dataKey: category,
+              stroke: getLineColor(idx),
+              strokeDasharray: getLineDash(category),
+              fill: getLineColor(idx),
+              fillOpacity: 0.2,
+              strokeWidth: 2,
+              connectNulls,
+              dot: false,
+              activeDot: { r: 4, strokeWidth: 0 }
+            },
+            category
+          )) : categories.map((category, idx) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: curveType,
+              dataKey: category,
+              stroke: getLineColor(idx),
+              strokeDasharray: getLineDash(category),
+              strokeWidth: 2,
+              connectNulls,
+              dot: false,
+              activeDot: { r: 4, strokeWidth: 0 }
+            },
+            category
+          ))
+        ]
+      }
+    ) }) })
+  ] });
+}
+var LineChart_default = LineChart;
+export {
+  LineChart,
+  LineChart_default as default
+};
+//# sourceMappingURL=LineChart.js.map

package/dist/backend/charts/LineChart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/LineChart.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  LineChart as RechartsLineChart,\n  AreaChart as RechartsAreaChart,\n  Line,\n  Area,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\nexport type LineChartDataItem = Record<string, string | number | null | undefined>\n\nexport type LineDashStyle = 'solid' | 'ShortDash' | 'Dash' | 'Dot'\n\n/** Map a Highcharts-style dashStyle to a Recharts `strokeDasharray`. `solid` \u2192 undefined. */\nconst DASH_ARRAY: Record<LineDashStyle, string | undefined> = {\n  solid: undefined,\n  ShortDash: '6 3',\n  Dash: '8 5',\n  Dot: '2 4',\n}\n\nexport type LineChartProps = {\n  title?: string\n  data: LineChartDataItem[]\n  index: string\n  categories: string[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  showArea?: boolean\n  valueFormatter?: (value: number) => string\n  showLegend?: boolean\n  showGridLines?: boolean\n  curveType?: 'linear' | 'natural' | 'monotone' | 'step'\n  connectNulls?: boolean\n  className?: string\n  emptyMessage?: string\n  categoryLabels?: Record<string, string>\n  /**\n   * Per-category line dash style (Highcharts-style names mapped to Recharts\n   * `strokeDasharray`: `ShortDash`\u2192\"6 3\", `Dash`\u2192\"8 5\", `Dot`\u2192\"2 4\", `solid`\u2192none).\n   * Categories absent from the map keep the solid default \u2014 e.g. chart 8:\n   * Plan=ShortDash / Wykonanie=solid / Predykcja=Dot.\n   */\n  seriesDash?: Record<string, LineDashStyle>\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nexport function LineChart({\n  title,\n  data,\n  index,\n  categories,\n  loading,\n  error,\n  colors,\n  showArea = false,\n  valueFormatter = defaultValueFormatter,\n  showLegend = true,\n  showGridLines = true,\n  curveType = 'monotone',\n  connectNulls = true,\n  className = '',\n  emptyMessage = 'No data available',\n  categoryLabels,\n  seriesDash,\n}: LineChartProps) {\n  const getLineColor = (idx: number): string => {\n    return resolveChartColor(colors?.[idx], idx)\n  }\n\n  const getLineDash = (category: string): string | undefined => {\n    const style = seriesDash?.[category]\n    return style ? DASH_ARRAY[style] : undefined\n  }\n\n  if (error) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={`rounded-lg border bg-card p-4 ${className}`}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart\n\n  return (\n    <div className={`rounded-lg border bg-card p-4 ${className}`}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ChartComponent\n            data={data}\n            margin={{ top: 5, right: 10, left: 10, bottom: 5 }}\n          >\n            {showGridLines && (\n              <CartesianGrid\n                strokeDasharray=\"3 3\"\n                stroke=\"hsl(var(--border))\"\n              />\n            )}\n            <XAxis\n              dataKey={index}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n            />\n            <YAxis\n              tickFormatter={valueFormatter}\n              tick={{ fontSize: 12 }}\n              tickLine={false}\n              axisLine={false}\n              width={56}\n            />\n            <Tooltip\n              content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}\n              cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}\n            />\n            {showLegend && categories.length > 1 && (\n              <Legend\n                verticalAlign=\"top\"\n                height={36}\n                formatter={(value) => (\n                  <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n                )}\n              />\n            )}\n            {showArea\n              ? categories.map((category, idx) => (\n                  <Area\n                    key={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke={getLineColor(idx)}\n                    strokeDasharray={getLineDash(category)}\n                    fill={getLineColor(idx)}\n                    fillOpacity={0.2}\n                    strokeWidth={2}\n                    connectNulls={connectNulls}\n                    dot={false}\n                    activeDot={{ r: 4, strokeWidth: 0 }}\n                  />\n                ))\n              : categories.map((category, idx) => (\n                  <Line\n                    key={category}\n                    type={curveType}\n                    dataKey={category}\n                    stroke={getLineColor(idx)}\n                    strokeDasharray={getLineDash(category)}\n                    strokeWidth={2}\n                    connectNulls={connectNulls}\n                    dot={false}\n                    activeDot={{ r: 4, strokeWidth: 0 }}\n                  />\n                ))}\n          </ChartComponent>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n\nexport default LineChart\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/charts/PieChart.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Label
+} from "recharts";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+import { ChartTooltipContent, resolveChartColor } from "./ChartUtils.js";
+function defaultValueFormatter(value) {
+  if (Math.abs(value) >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (Math.abs(value) >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+}
+function PieChart({
+  title,
+  data,
+  loading,
+  error,
+  colors,
+  variant = "donut",
+  valueFormatter = defaultValueFormatter,
+  showLabel = true,
+  showTooltip = true,
+  className = "",
+  emptyMessage = "No data available"
+}) {
+  const getSliceColor = (idx) => {
+    return resolveChartColor(colors?.[idx], idx);
+  };
+  const total = React.useMemo(() => {
+    return data.reduce((sum, item) => sum + item.value, 0);
+  }, [data]);
+  const hasWrapper = !!title;
+  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className;
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }) })
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-muted-foreground" }) })
+    ] });
+  }
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-48 items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) })
+    ] });
+  }
+  const innerRadius = variant === "donut" ? "60%" : 0;
+  const outerRadius = "80%";
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-medium text-card-foreground", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "h-52 w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RechartsPieChart, { children: [
+      /* @__PURE__ */ jsxs(
+        Pie,
+        {
+          data,
+          dataKey: "value",
+          nameKey: "name",
+          cx: "50%",
+          cy: "40%",
+          innerRadius,
+          outerRadius,
+          paddingAngle: 2,
+          strokeWidth: 0,
+          children: [
+            data.map((_, idx) => /* @__PURE__ */ jsx(Cell, { fill: getSliceColor(idx) }, `cell-${idx}`)),
+            showLabel && variant === "donut" && /* @__PURE__ */ jsx(
+              Label,
+              {
+                value: valueFormatter(total),
+                position: "center",
+                className: "fill-foreground text-2xl font-bold"
+              }
+            )
+          ]
+        }
+      ),
+      showTooltip && /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx(
+            ChartTooltipContent,
+            {
+              valueFormatter,
+              hideLabel: true
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Legend,
+        {
+          verticalAlign: "bottom",
+          height: 36,
+          formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: "hsl(var(--muted-foreground))", fontSize: "12px" }, children: value })
+        }
+      )
+    ] }) }) })
+  ] });
+}
+var PieChart_default = PieChart;
+export {
+  PieChart,
+  PieChart_default as default
+};
+//# sourceMappingURL=PieChart.js.map

package/dist/backend/charts/PieChart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/charts/PieChart.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  PieChart as RechartsPieChart,\n  Pie,\n  Cell,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n  Label,\n} from 'recharts'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\nimport { ChartTooltipContent, resolveChartColor } from './ChartUtils'\n\nexport type PieChartDataItem = {\n  name: string\n  value: number\n}\n\nexport type PieChartProps = {\n  title?: string\n  data: PieChartDataItem[]\n  loading?: boolean\n  error?: string | null\n  colors?: string[]\n  variant?: 'pie' | 'donut'\n  valueFormatter?: (value: number) => string\n  showLabel?: boolean\n  showTooltip?: boolean\n  className?: string\n  emptyMessage?: string\n}\n\nfunction defaultValueFormatter(value: number): string {\n  if (Math.abs(value) >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(1)}M`\n  }\n  if (Math.abs(value) >= 1_000) {\n    return `${(value / 1_000).toFixed(1)}K`\n  }\n  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })\n}\n\nexport function PieChart({\n  title,\n  data,\n  loading,\n  error,\n  colors,\n  variant = 'donut',\n  valueFormatter = defaultValueFormatter,\n  showLabel = true,\n  showTooltip = true,\n  className = '',\n  emptyMessage = 'No data available',\n}: PieChartProps) {\n  const getSliceColor = (idx: number): string => {\n    return resolveChartColor(colors?.[idx], idx)\n  }\n\n  const total = React.useMemo(() => {\n    return data.reduce((sum, item) => sum + item.value, 0)\n  }, [data])\n\n  const hasWrapper = !!title\n  const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className\n\n  if (error) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-destructive\">{error}</p>\n        </div>\n      </div>\n    )\n  }\n\n  if (loading) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <div className={wrapperClass}>\n        {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n        <div className=\"flex h-48 items-center justify-center\">\n          <p className=\"text-sm text-muted-foreground\">{emptyMessage}</p>\n        </div>\n      </div>\n    )\n  }\n\n  const innerRadius = variant === 'donut' ? '60%' : 0\n  const outerRadius = '80%'\n\n  return (\n    <div className={wrapperClass}>\n      {title && <h3 className=\"mb-4 text-base font-medium text-card-foreground\">{title}</h3>}\n      <div className=\"h-52 w-full\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsPieChart>\n            <Pie\n              data={data}\n              dataKey=\"value\"\n              nameKey=\"name\"\n              cx=\"50%\"\n              cy=\"40%\"\n              innerRadius={innerRadius}\n              outerRadius={outerRadius}\n              paddingAngle={2}\n              strokeWidth={0}\n            >\n              {data.map((_, idx) => (\n                <Cell key={`cell-${idx}`} fill={getSliceColor(idx)} />\n              ))}\n              {showLabel && variant === 'donut' && (\n                <Label\n                  value={valueFormatter(total)}\n                  position=\"center\"\n                  className=\"fill-foreground text-2xl font-bold\"\n                />\n              )}\n            </Pie>\n            {showTooltip && (\n              <Tooltip\n                content={\n                  <ChartTooltipContent\n                    valueFormatter={valueFormatter}\n                    hideLabel\n                  />\n                }\n              />\n            )}\n            <Legend\n              verticalAlign=\"bottom\"\n              height={36}\n              formatter={(value) => (\n                <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>\n              )}\n            />\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n\nexport default PieChart\n"],
+  "mappings": "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",
+  "names": []
+}