@open-mercato/core 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

package/dist/modules/customers/components/detail/ChangelogEntryRow.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Settings2, SquarePen, Plus, Trash2, UserRoundPlus, ArrowRight } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { getInitials } from "./utils.js";
+const ACTION_ICONS = {
+  create: Plus,
+  edit: SquarePen,
+  delete: Trash2,
+  assign: UserRoundPlus,
+  system: Settings2
+};
+function formatFieldLabel(fieldName) {
+  return fieldName.replace(/\./g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/^\w/, (char) => char.toUpperCase());
+}
+function formatRelativeTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const diffMs = date.getTime() - Date.now();
+  const diffMinutes = Math.round(diffMs / 6e4);
+  const formatter = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+  if (Math.abs(diffMinutes) < 60) return formatter.format(diffMinutes, "minute");
+  const diffHours = Math.round(diffMinutes / 60);
+  if (Math.abs(diffHours) < 24) return formatter.format(diffHours, "hour");
+  const diffDays = Math.round(diffHours / 24);
+  return formatter.format(diffDays, "day");
+}
+function ChangelogEntryRow({ entry }) {
+  const t = useT();
+  const ActionIcon = ACTION_ICONS[entry.actionType];
+  const createdAt = new Date(entry.createdAt);
+  const timeLabel = Number.isNaN(createdAt.getTime()) ? "00:00" : createdAt.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+  const relativeLabel = formatRelativeTime(entry.createdAt);
+  const actorLabel = entry.actorUserName ?? t("customers.changelog.user.system", "System");
+  const actionLabel = t(`customers.changelog.actions.${entry.actionType}`, formatFieldLabel(entry.actionType));
+  const sourceLabel = entry.source === "api" ? t("customers.changelog.source.api", "API") : entry.source === "system" ? t("customers.changelog.source.system", "System") : t("customers.changelog.source.ui", "UI");
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[92px_190px_120px_1fr_80px] gap-3 px-5 py-3 text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: timeLabel }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: relativeLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground", children: entry.actorUserId ? getInitials(actorLabel) : /* @__PURE__ */ jsx(Settings2, { className: "size-3.5" }) }),
+      /* @__PURE__ */ jsx("span", { className: "truncate pt-1 text-sm text-foreground", children: actorLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 pt-0.5 text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx(ActionIcon, { className: "mt-0.5 size-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { children: actionLabel })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-1.5", children: entry.changes.length > 0 ? entry.changes.map((change) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: formatFieldLabel(change.fieldName) }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "max-w-[12rem] rounded-full border-status-error-border bg-status-error-bg px-2 py-0.5 text-xs font-medium text-status-error-text",
+          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: change.oldValue || "\u2014" })
+        }
+      ),
+      /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "max-w-[12rem] rounded-full border-status-success-border bg-status-success-bg px-2 py-0.5 text-xs font-medium text-status-success-text",
+          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: change.newValue || "\u2014" })
+        }
+      )
+    ] }, `${entry.id}-${change.fieldName}`)) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: entry.description ?? actionLabel }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-start justify-end", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "px-1.5 py-0 text-xs", children: sourceLabel }) })
+  ] });
+}
+var ChangelogEntryRow_default = ChangelogEntryRow;
+export {
+  ChangelogEntryRow,
+  ChangelogEntryRow_default as default
+};
+//# sourceMappingURL=ChangelogEntryRow.js.map

package/dist/modules/customers/components/detail/ChangelogEntryRow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/ChangelogEntryRow.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Settings2, SquarePen, Plus, Trash2, UserRoundPlus, ArrowRight } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { getInitials } from './utils'\n\ntype ChangelogActionType = 'create' | 'edit' | 'delete' | 'assign' | 'system'\ntype ChangelogSource = 'ui' | 'api' | 'system'\n\ntype ChangelogEntryRowProps = {\n  entry: {\n    id: string\n    createdAt: string\n    actorUserId: string | null\n    actorUserName: string | null\n    actionType: ChangelogActionType\n    source: ChangelogSource\n    description: string | null\n    changes: Array<{\n      fieldName: string\n      oldValue: string\n      newValue: string\n    }>\n  }\n}\n\nconst ACTION_ICONS: Record<ChangelogActionType, React.ComponentType<{ className?: string }>> = {\n  create: Plus,\n  edit: SquarePen,\n  delete: Trash2,\n  assign: UserRoundPlus,\n  system: Settings2,\n}\n\nfunction formatFieldLabel(fieldName: string): string {\n  return fieldName\n    .replace(/\\./g, ' ')\n    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')\n    .replace(/[_-]+/g, ' ')\n    .replace(/\\s+/g, ' ')\n    .trim()\n    .replace(/^\\w/, (char) => char.toUpperCase())\n}\n\nfunction formatRelativeTime(value: string): string {\n  const date = new Date(value)\n  if (Number.isNaN(date.getTime())) return ''\n  const diffMs = date.getTime() - Date.now()\n  const diffMinutes = Math.round(diffMs / 60000)\n  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })\n\n  if (Math.abs(diffMinutes) < 60) return formatter.format(diffMinutes, 'minute')\n\n  const diffHours = Math.round(diffMinutes / 60)\n  if (Math.abs(diffHours) < 24) return formatter.format(diffHours, 'hour')\n\n  const diffDays = Math.round(diffHours / 24)\n  return formatter.format(diffDays, 'day')\n}\n\nexport function ChangelogEntryRow({ entry }: ChangelogEntryRowProps) {\n  const t = useT()\n  const ActionIcon = ACTION_ICONS[entry.actionType]\n  const createdAt = new Date(entry.createdAt)\n  const timeLabel = Number.isNaN(createdAt.getTime())\n    ? '00:00'\n    : createdAt.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })\n  const relativeLabel = formatRelativeTime(entry.createdAt)\n  const actorLabel = entry.actorUserName ?? t('customers.changelog.user.system', 'System')\n  const actionLabel = t(`customers.changelog.actions.${entry.actionType}`, formatFieldLabel(entry.actionType))\n  const sourceLabel = entry.source === 'api'\n    ? t('customers.changelog.source.api', 'API')\n    : entry.source === 'system'\n      ? t('customers.changelog.source.system', 'System')\n      : t('customers.changelog.source.ui', 'UI')\n\n  return (\n    <div className=\"grid grid-cols-[92px_190px_120px_1fr_80px] gap-3 px-5 py-3 text-sm\">\n      <div className=\"space-y-0.5\">\n        <div className=\"font-medium text-foreground\">{timeLabel}</div>\n        <div className=\"text-xs text-muted-foreground\">{relativeLabel}</div>\n      </div>\n\n      <div className=\"flex items-start gap-2\">\n        <div className=\"flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground\">\n          {entry.actorUserId ? getInitials(actorLabel) : <Settings2 className=\"size-3.5\" />}\n        </div>\n        <span className=\"truncate pt-1 text-sm text-foreground\">{actorLabel}</span>\n      </div>\n\n      <div className=\"flex items-start gap-2 pt-0.5 text-sm text-foreground\">\n        <ActionIcon className=\"mt-0.5 size-4 text-muted-foreground\" />\n        <span>{actionLabel}</span>\n      </div>\n\n      <div className=\"min-w-0 space-y-1.5\">\n        {entry.changes.length > 0 ? (\n          entry.changes.map((change) => (\n            <div key={`${entry.id}-${change.fieldName}`} className=\"flex flex-wrap items-center gap-2 text-sm\">\n              <span className=\"font-medium text-foreground\">{formatFieldLabel(change.fieldName)}</span>\n              <Badge\n                variant=\"outline\"\n                className=\"max-w-[12rem] rounded-full border-status-error-border bg-status-error-bg px-2 py-0.5 text-xs font-medium text-status-error-text\"\n              >\n                <span className=\"truncate\">{change.oldValue || '\u2014'}</span>\n              </Badge>\n              <ArrowRight className=\"size-3.5 text-muted-foreground\" />\n              <Badge\n                variant=\"outline\"\n                className=\"max-w-[12rem] rounded-full border-status-success-border bg-status-success-bg px-2 py-0.5 text-xs font-medium text-status-success-text\"\n              >\n                <span className=\"truncate\">{change.newValue || '\u2014'}</span>\n              </Badge>\n            </div>\n          ))\n        ) : (\n          <span className=\"text-sm text-muted-foreground\">{entry.description ?? actionLabel}</span>\n        )}\n      </div>\n\n      <div className=\"flex items-start justify-end\">\n        <Badge variant=\"secondary\" className=\"px-1.5 py-0 text-xs\">\n          {sourceLabel}\n        </Badge>\n      </div>\n    </div>\n  )\n}\n\nexport default ChangelogEntryRow\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/customers/components/detail/ChangelogFilters.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { Check, ChevronDown, Download, Search } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function FilterPopover({ allLabel, options, values, triggerLabel, onChange }) {
+  const t = useT();
+  const [search, setSearch] = React.useState("");
+  const filteredOptions = React.useMemo(() => {
+    const normalizedSearch = search.trim().toLowerCase();
+    if (!normalizedSearch) return options;
+    return options.filter((option) => option.label.toLowerCase().includes(normalizedSearch));
+  }, [options, search]);
+  const valuesSet = React.useMemo(() => new Set(values), [values]);
+  const toggleValue = React.useCallback((value) => {
+    if (valuesSet.has(value)) {
+      onChange(values.filter((entry) => entry !== value));
+      return;
+    }
+    onChange([...values, value]);
+  }, [onChange, values, valuesSet]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 justify-between gap-2 rounded-lg px-3 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: triggerLabel }),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-muted-foreground" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-72 space-y-3 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            onChange: (event) => setSearch(event.target.value),
+            placeholder: t("customers.changelog.filters.search", "Search"),
+            className: "h-8 pl-8 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "max-h-64 space-y-1 overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onChange([]),
+            className: "h-auto w-full justify-start px-2 py-1.5 text-xs",
+            children: [
+              values.length === 0 ? /* @__PURE__ */ jsx(Check, { className: "mr-2 size-3.5 text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "mr-5" }),
+              allLabel
+            ]
+          }
+        ),
+        filteredOptions.map((option) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => toggleValue(option.value),
+            className: "h-auto w-full justify-start px-2 py-1.5 text-xs",
+            children: [
+              valuesSet.has(option.value) ? /* @__PURE__ */ jsx(Check, { className: "mr-2 size-3.5 text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "mr-5" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+            ]
+          },
+          option.value
+        )),
+        filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-3 text-xs text-muted-foreground", children: t("customers.changelog.filters.empty", "No matching options") }) : null
+      ] })
+    ] })
+  ] });
+}
+function ChangelogFilters({
+  dateRange,
+  fieldNames,
+  actorUserIds,
+  actionTypes,
+  fieldOptions,
+  userOptions,
+  actionOptions,
+  exportDisabled = false,
+  onDateRangeChange,
+  onFieldNamesChange,
+  onActorUserIdsChange,
+  onActionTypesChange,
+  onExport
+}) {
+  const t = useT();
+  const describeSelection = React.useCallback((allLabel, options, values) => {
+    if (values.length === 0) return allLabel;
+    if (values.length === 1) return options.find((option) => option.value === values[0])?.label ?? allLabel;
+    return t("customers.changelog.filters.selectedCount", "{{count}} selected", { count: values.length });
+  }, [t]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border bg-card px-4 py-3 lg:flex-row lg:items-center lg:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
+        t("customers.changelog.filter", "Filter"),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx(
+        FilterPopover,
+        {
+          allLabel: t("customers.changelog.allFields", "All fields"),
+          options: fieldOptions,
+          values: fieldNames,
+          triggerLabel: describeSelection(t("customers.changelog.allFields", "All fields"), fieldOptions, fieldNames),
+          onChange: onFieldNamesChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FilterPopover,
+        {
+          allLabel: t("customers.changelog.allUsers", "All users"),
+          options: userOptions,
+          values: actorUserIds,
+          triggerLabel: describeSelection(t("customers.changelog.allUsers", "All users"), userOptions, actorUserIds),
+          onChange: onActorUserIdsChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FilterPopover,
+        {
+          allLabel: t("customers.changelog.allActions", "All actions"),
+          options: actionOptions,
+          values: actionTypes,
+          triggerLabel: describeSelection(t("customers.changelog.allActions", "All actions"), actionOptions, actionTypes),
+          onChange: onActionTypesChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: dateRange,
+            onChange: (event) => onDateRangeChange(event.target.value),
+            className: "h-8 min-w-32 appearance-none rounded-lg border bg-background pl-3 pr-8 text-xs text-foreground outline-none ring-offset-background focus:ring-2 focus:ring-ring",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "7d", children: t("customers.changelog.last7days", "Last 7 days") }),
+              /* @__PURE__ */ jsx("option", { value: "30d", children: t("customers.changelog.last30days", "Last 30 days") }),
+              /* @__PURE__ */ jsx("option", { value: "90d", children: t("customers.changelog.last90days", "Last 90 days") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: onExport,
+          disabled: exportDisabled,
+          className: "h-8 rounded-lg px-3 text-xs",
+          children: [
+            /* @__PURE__ */ jsx(Download, { className: "mr-1.5 size-3.5" }),
+            t("customers.changelog.exportCsv", "Export CSV")
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var ChangelogFilters_default = ChangelogFilters;
+export {
+  ChangelogFilters,
+  ChangelogFilters_default as default
+};
+//# sourceMappingURL=ChangelogFilters.js.map

package/dist/modules/customers/components/detail/ChangelogFilters.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/ChangelogFilters.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { Check, ChevronDown, Download, Search } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\ntype FilterOption = {\n  value: string\n  label: string\n}\n\ntype ChangelogFiltersProps = {\n  dateRange: '7d' | '30d' | '90d'\n  fieldNames: string[]\n  actorUserIds: string[]\n  actionTypes: string[]\n  fieldOptions: FilterOption[]\n  userOptions: FilterOption[]\n  actionOptions: FilterOption[]\n  exportDisabled?: boolean\n  onDateRangeChange: (value: '7d' | '30d' | '90d') => void\n  onFieldNamesChange: (value: string[]) => void\n  onActorUserIdsChange: (value: string[]) => void\n  onActionTypesChange: (value: string[]) => void\n  onExport: () => void\n}\n\ntype FilterPopoverProps = {\n  allLabel: string\n  options: FilterOption[]\n  values: string[]\n  triggerLabel: string\n  onChange: (value: string[]) => void\n}\n\nfunction FilterPopover({ allLabel, options, values, triggerLabel, onChange }: FilterPopoverProps) {\n  const t = useT()\n  const [search, setSearch] = React.useState('')\n  const filteredOptions = React.useMemo(() => {\n    const normalizedSearch = search.trim().toLowerCase()\n    if (!normalizedSearch) return options\n    return options.filter((option) => option.label.toLowerCase().includes(normalizedSearch))\n  }, [options, search])\n  const valuesSet = React.useMemo(() => new Set(values), [values])\n\n  const toggleValue = React.useCallback((value: string) => {\n    if (valuesSet.has(value)) {\n      onChange(values.filter((entry) => entry !== value))\n      return\n    }\n    onChange([...values, value])\n  }, [onChange, values, valuesSet])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"h-8 justify-between gap-2 rounded-lg px-3 text-xs\">\n          <span className=\"truncate\">{triggerLabel}</span>\n          <ChevronDown className=\"size-3.5 text-muted-foreground\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-72 space-y-3 p-3\">\n        <div className=\"relative\">\n          <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n          <Input\n            value={search}\n            onChange={(event) => setSearch(event.target.value)}\n            placeholder={t('customers.changelog.filters.search', 'Search')}\n            className=\"h-8 pl-8 text-xs\"\n          />\n        </div>\n\n        <div className=\"max-h-64 space-y-1 overflow-y-auto\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => onChange([])}\n            className=\"h-auto w-full justify-start px-2 py-1.5 text-xs\"\n          >\n            {values.length === 0 ? <Check className=\"mr-2 size-3.5 text-foreground\" /> : <span className=\"mr-5\" />}\n            {allLabel}\n          </Button>\n          {filteredOptions.map((option) => (\n            <Button\n              key={option.value}\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => toggleValue(option.value)}\n              className=\"h-auto w-full justify-start px-2 py-1.5 text-xs\"\n            >\n              {valuesSet.has(option.value) ? <Check className=\"mr-2 size-3.5 text-foreground\" /> : <span className=\"mr-5\" />}\n              <span className=\"truncate\">{option.label}</span>\n            </Button>\n          ))}\n          {filteredOptions.length === 0 ? (\n            <div className=\"px-2 py-3 text-xs text-muted-foreground\">\n              {t('customers.changelog.filters.empty', 'No matching options')}\n            </div>\n          ) : null}\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport function ChangelogFilters({\n  dateRange,\n  fieldNames,\n  actorUserIds,\n  actionTypes,\n  fieldOptions,\n  userOptions,\n  actionOptions,\n  exportDisabled = false,\n  onDateRangeChange,\n  onFieldNamesChange,\n  onActorUserIdsChange,\n  onActionTypesChange,\n  onExport,\n}: ChangelogFiltersProps) {\n  const t = useT()\n\n  const describeSelection = React.useCallback((allLabel: string, options: FilterOption[], values: string[]) => {\n    if (values.length === 0) return allLabel\n    if (values.length === 1) return options.find((option) => option.value === values[0])?.label ?? allLabel\n    return t('customers.changelog.filters.selectedCount', '{{count}} selected', { count: values.length })\n  }, [t])\n\n  return (\n    <div className=\"flex flex-col gap-3 rounded-xl border bg-card px-4 py-3 lg:flex-row lg:items-center lg:justify-between\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <span className=\"text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground\">\n          {t('customers.changelog.filter', 'Filter')}:\n        </span>\n        <FilterPopover\n          allLabel={t('customers.changelog.allFields', 'All fields')}\n          options={fieldOptions}\n          values={fieldNames}\n          triggerLabel={describeSelection(t('customers.changelog.allFields', 'All fields'), fieldOptions, fieldNames)}\n          onChange={onFieldNamesChange}\n        />\n        <FilterPopover\n          allLabel={t('customers.changelog.allUsers', 'All users')}\n          options={userOptions}\n          values={actorUserIds}\n          triggerLabel={describeSelection(t('customers.changelog.allUsers', 'All users'), userOptions, actorUserIds)}\n          onChange={onActorUserIdsChange}\n        />\n        <FilterPopover\n          allLabel={t('customers.changelog.allActions', 'All actions')}\n          options={actionOptions}\n          values={actionTypes}\n          triggerLabel={describeSelection(t('customers.changelog.allActions', 'All actions'), actionOptions, actionTypes)}\n          onChange={onActionTypesChange}\n        />\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <div className=\"relative\">\n          <select\n            value={dateRange}\n            onChange={(event) => onDateRangeChange(event.target.value as '7d' | '30d' | '90d')}\n            className=\"h-8 min-w-32 appearance-none rounded-lg border bg-background pl-3 pr-8 text-xs text-foreground outline-none ring-offset-background focus:ring-2 focus:ring-ring\"\n          >\n            <option value=\"7d\">{t('customers.changelog.last7days', 'Last 7 days')}</option>\n            <option value=\"30d\">{t('customers.changelog.last30days', 'Last 30 days')}</option>\n            <option value=\"90d\">{t('customers.changelog.last90days', 'Last 90 days')}</option>\n          </select>\n          <ChevronDown className=\"pointer-events-none absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n        </div>\n\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={onExport}\n          disabled={exportDisabled}\n          className=\"h-8 rounded-lg px-3 text-xs\"\n        >\n          <Download className=\"mr-1.5 size-3.5\" />\n          {t('customers.changelog.exportCsv', 'Export CSV')}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ChangelogFilters\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/customers/components/detail/ChangelogKpiCards.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownRight, ArrowUpRight, Minus } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function MetricCard({ title, value, subtitle, trend, loading }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card px-5 py-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "mt-3 text-3xl font-semibold tracking-tight text-foreground", children: loading ? "..." : value.toLocaleString() }),
+    trend ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: [
+            "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+            trend.direction === "up" ? "bg-status-success-bg text-status-success-text" : trend.direction === "down" ? "bg-destructive/10 text-destructive" : "bg-muted text-muted-foreground"
+          ].join(" "),
+          children: [
+            trend.direction === "up" ? /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" }) : null,
+            trend.direction === "down" ? /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }) : null,
+            trend.direction === "unchanged" ? /* @__PURE__ */ jsx(Minus, { className: "size-3" }) : null,
+            trend.value > 0 ? "+" : "",
+            trend.value
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: subtitle })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: subtitle })
+  ] });
+}
+function ChangelogKpiCards({
+  loading = false,
+  totalCount,
+  todayCount,
+  yesterdayCount,
+  uniqueUsers,
+  criticalFieldCount,
+  criticalFieldLabel,
+  dateRangeDays
+}) {
+  const t = useT();
+  const trendValue = todayCount - yesterdayCount;
+  const trendDirection = trendValue > 0 ? "up" : trendValue < 0 ? "down" : "unchanged";
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: [
+    /* @__PURE__ */ jsx(
+      MetricCard,
+      {
+        loading,
+        title: t("customers.changelog.kpi.totalChanges", "All changes"),
+        value: totalCount,
+        subtitle: t("customers.changelog.kpi.period", "last {{days}} days", { days: dateRangeDays })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetricCard,
+      {
+        loading,
+        title: t("customers.changelog.kpi.today", "Today"),
+        value: todayCount,
+        subtitle: t("customers.changelog.kpi.vsYesterday", "vs yesterday"),
+        trend: { value: trendValue, direction: trendDirection }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetricCard,
+      {
+        loading,
+        title: t("customers.changelog.kpi.users", "Users"),
+        value: uniqueUsers,
+        subtitle: t("customers.changelog.kpi.active", "active")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MetricCard,
+      {
+        loading,
+        title: t("customers.changelog.kpi.criticalFields", "Critical fields"),
+        value: criticalFieldCount,
+        subtitle: criticalFieldLabel
+      }
+    )
+  ] });
+}
+var ChangelogKpiCards_default = ChangelogKpiCards;
+export {
+  ChangelogKpiCards,
+  ChangelogKpiCards_default as default
+};
+//# sourceMappingURL=ChangelogKpiCards.js.map

package/dist/modules/customers/components/detail/ChangelogKpiCards.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/customers/components/detail/ChangelogKpiCards.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\ntype ChangelogKpiCardsProps = {\n  loading?: boolean\n  totalCount: number\n  todayCount: number\n  yesterdayCount: number\n  uniqueUsers: number\n  criticalFieldCount: number\n  criticalFieldLabel: string\n  dateRangeDays: number\n}\n\ntype MetricCardProps = {\n  title: string\n  value: number\n  subtitle: string\n  trend?: {\n    value: number\n    direction: 'up' | 'down' | 'unchanged'\n  }\n  loading?: boolean\n}\n\nfunction MetricCard({ title, value, subtitle, trend, loading }: MetricCardProps) {\n  return (\n    <div className=\"rounded-xl border bg-card px-5 py-4\">\n      <div className=\"text-overline font-semibold uppercase tracking-[0.12em] text-muted-foreground\">{title}</div>\n      <div className=\"mt-3 text-3xl font-semibold tracking-tight text-foreground\">\n        {loading ? '...' : value.toLocaleString()}\n      </div>\n      {trend ? (\n        <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n          <span\n            className={[\n              'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',\n              trend.direction === 'up'\n                ? 'bg-status-success-bg text-status-success-text'\n                : trend.direction === 'down'\n                  ? 'bg-destructive/10 text-destructive'\n                  : 'bg-muted text-muted-foreground',\n            ].join(' ')}\n          >\n            {trend.direction === 'up' ? <ArrowUpRight className=\"size-3\" /> : null}\n            {trend.direction === 'down' ? <ArrowDownRight className=\"size-3\" /> : null}\n            {trend.direction === 'unchanged' ? <Minus className=\"size-3\" /> : null}\n            {trend.value > 0 ? '+' : ''}\n            {trend.value}\n          </span>\n          <span className=\"text-xs text-muted-foreground\">{subtitle}</span>\n        </div>\n      ) : (\n        <div className=\"mt-2 text-xs text-muted-foreground\">{subtitle}</div>\n      )}\n    </div>\n  )\n}\n\nexport function ChangelogKpiCards({\n  loading = false,\n  totalCount,\n  todayCount,\n  yesterdayCount,\n  uniqueUsers,\n  criticalFieldCount,\n  criticalFieldLabel,\n  dateRangeDays,\n}: ChangelogKpiCardsProps) {\n  const t = useT()\n  const trendValue = todayCount - yesterdayCount\n  const trendDirection = trendValue > 0 ? 'up' : trendValue < 0 ? 'down' : 'unchanged'\n\n  return (\n    <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4\">\n      <MetricCard\n        loading={loading}\n        title={t('customers.changelog.kpi.totalChanges', 'All changes')}\n        value={totalCount}\n        subtitle={t('customers.changelog.kpi.period', 'last {{days}} days', { days: dateRangeDays })}\n      />\n      <MetricCard\n        loading={loading}\n        title={t('customers.changelog.kpi.today', 'Today')}\n        value={todayCount}\n        subtitle={t('customers.changelog.kpi.vsYesterday', 'vs yesterday')}\n        trend={{ value: trendValue, direction: trendDirection }}\n      />\n      <MetricCard\n        loading={loading}\n        title={t('customers.changelog.kpi.users', 'Users')}\n        value={uniqueUsers}\n        subtitle={t('customers.changelog.kpi.active', 'active')}\n      />\n      <MetricCard\n        loading={loading}\n        title={t('customers.changelog.kpi.criticalFields', 'Critical fields')}\n        value={criticalFieldCount}\n        subtitle={criticalFieldLabel}\n      />\n    </div>\n  )\n}\n\nexport default ChangelogKpiCards\n"],
+  "mappings": ";AA8BM,cAMI,YANJ;AA5BN,SAAS,gBAAgB,cAAc,aAAa;AACpD,SAAS,YAAY;AAwBrB,SAAS,WAAW,EAAE,OAAO,OAAO,UAAU,OAAO,QAAQ,GAAoB;AAC/E,SACE,qBAAC,SAAI,WAAU,uCACb;AAAA,wBAAC,SAAI,WAAU,iFAAiF,iBAAM;AAAA,IACtG,oBAAC,SAAI,WAAU,8DACZ,oBAAU,QAAQ,MAAM,eAAe,GAC1C;AAAA,IACC,QACC,qBAAC,SAAI,WAAU,0CACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,MAAM,cAAc,OAChB,kDACA,MAAM,cAAc,SAClB,uCACA;AAAA,UACR,EAAE,KAAK,GAAG;AAAA,UAET;AAAA,kBAAM,cAAc,OAAO,oBAAC,gBAAa,WAAU,UAAS,IAAK;AAAA,YACjE,MAAM,cAAc,SAAS,oBAAC,kBAAe,WAAU,UAAS,IAAK;AAAA,YACrE,MAAM,cAAc,cAAc,oBAAC,SAAM,WAAU,UAAS,IAAK;AAAA,YACjE,MAAM,QAAQ,IAAI,MAAM;AAAA,YACxB,MAAM;AAAA;AAAA;AAAA,MACT;AAAA,MACA,oBAAC,UAAK,WAAU,iCAAiC,oBAAS;AAAA,OAC5D,IAEA,oBAAC,SAAI,WAAU,sCAAsC,oBAAS;AAAA,KAElE;AAEJ;AAEO,SAAS,kBAAkB;AAAA,EAChC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,IAAI,KAAK;AACf,QAAM,aAAa,aAAa;AAChC,QAAM,iBAAiB,aAAa,IAAI,OAAO,aAAa,IAAI,SAAS;AAEzE,SACE,qBAAC,SAAI,WAAU,wDACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,wCAAwC,aAAa;AAAA,QAC9D,OAAO;AAAA,QACP,UAAU,EAAE,kCAAkC,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAAA;AAAA,IAC7F;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,iCAAiC,OAAO;AAAA,QACjD,OAAO;AAAA,QACP,UAAU,EAAE,uCAAuC,cAAc;AAAA,QACjE,OAAO,EAAE,OAAO,YAAY,WAAW,eAAe;AAAA;AAAA,IACxD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,iCAAiC,OAAO;AAAA,QACjD,OAAO;AAAA,QACP,UAAU,EAAE,kCAAkC,QAAQ;AAAA;AAAA,IACxD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,0CAA0C,iBAAiB;AAAA,QACpE,OAAO;AAAA,QACP,UAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AAEA,IAAO,4BAAQ;",
+  "names": []
+}