@open-mercato/core 0.7.1-develop.7178.1.ab93fbaf4e → 0.7.1-develop.7180.1.9717fbbb43

package/dist/modules/staff/lib/time-tracking-ui/BoardFilterChips.js

@@ -0,0 +1,283 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Plus, X } from "lucide-react";
+import { Avatar } from "@open-mercato/ui/primitives/avatar";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import {
+  useAssigneeNames,
+  useStaffMemberDirectory,
+  useTagDirectory,
+  useTagLabels
+} from "./boardDirectory.js";
+import {
+  countActiveBoardFilters,
+  withAssigneeFilter,
+  withStatusFilter,
+  withTagFilter,
+  withoutTagFilter
+} from "./boardFilters.js";
+function chipClassName(dashed) {
+  const base = "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs leading-normal text-foreground";
+  return dashed ? `${base} border border-dashed border-muted-foreground/60 bg-transparent text-muted-foreground hover:bg-muted/60` : `${base} border border-border bg-card`;
+}
+function FilterChip({
+  label,
+  avatarLabel,
+  removeLabel,
+  onRemove,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: chipClassName(false), "data-testid": testId, children: [
+    avatarLabel ? /* @__PURE__ */ jsx(Avatar, { size: "xs", label: avatarLabel, variant: "monochrome" }) : null,
+    /* @__PURE__ */ jsx("span", { className: "max-w-48 truncate font-semibold", children: label }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "2xs",
+        onClick: onRemove,
+        "aria-label": removeLabel,
+        "data-testid": `${testId}-remove`,
+        className: "size-4 rounded-full p-0 text-muted-foreground hover:text-foreground",
+        children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+function PickerRow({
+  label,
+  selected,
+  avatarLabel,
+  onSelect,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      role: "checkbox",
+      "aria-checked": selected,
+      onClick: onSelect,
+      "data-testid": testId,
+      className: `h-auto w-full justify-start gap-2.5 rounded-md px-2.5 py-2 text-left text-sm font-normal ${selected ? "bg-muted/60" : "bg-transparent"}`,
+      children: [
+        avatarLabel ? /* @__PURE__ */ jsx(Avatar, { size: "xs", label: avatarLabel, variant: "monochrome" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: label }),
+        selected ? /* @__PURE__ */ jsx(Check, { className: "ml-auto size-3.5 text-muted-foreground", "aria-hidden": "true" }) : null
+      ]
+    }
+  );
+}
+function AddBoardFilterPopover({
+  filters,
+  onChange,
+  self,
+  statuses,
+  trigger,
+  testId = "board-filter-add"
+}) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const tagDirectory = useTagDirectory(open);
+  const memberDirectory = useStaffMemberDirectory(open);
+  const tags = tagDirectory.data ?? [];
+  const otherMembers = React.useMemo(
+    () => (memberDirectory.data ?? []).filter((member) => member.id !== self?.id),
+    [memberDirectory.data, self?.id]
+  );
+  const assignedToMeLabel = t("staff.time_tracking.board.filters.assignedToMe", "Assigned to me");
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-72 p-0", "data-testid": `${testId}-popover`, children: /* @__PURE__ */ jsxs("div", { className: "max-h-96 overflow-y-auto p-2", children: [
+      self ? /* @__PURE__ */ jsx(
+        PickerRow,
+        {
+          label: assignedToMeLabel,
+          avatarLabel: self.displayName ?? assignedToMeLabel,
+          selected: filters.assigneeStaffMemberId === self.id,
+          testId: "board-filter-assigned-to-me",
+          onSelect: () => {
+            onChange(
+              withAssigneeFilter(
+                filters,
+                filters.assigneeStaffMemberId === self.id ? null : self.id
+              )
+            );
+            setOpen(false);
+          }
+        }
+      ) : null,
+      otherMembers.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "px-2.5 py-1 text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground", children: t("staff.time_tracking.board.filters.assignee", "Assignee") }),
+        otherMembers.map((member) => /* @__PURE__ */ jsx(
+          PickerRow,
+          {
+            label: member.displayName,
+            avatarLabel: member.displayName,
+            selected: filters.assigneeStaffMemberId === member.id,
+            testId: `board-filter-assignee-${member.id}`,
+            onSelect: () => {
+              onChange(
+                withAssigneeFilter(
+                  filters,
+                  filters.assigneeStaffMemberId === member.id ? null : member.id
+                )
+              );
+              setOpen(false);
+            }
+          },
+          member.id
+        ))
+      ] }) : null,
+      statuses.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "px-2.5 py-1 text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground", children: t("staff.time_tracking.board.filters.status", "Status") }),
+        statuses.map((status) => /* @__PURE__ */ jsx(
+          PickerRow,
+          {
+            label: status.name,
+            selected: filters.taskStatusId === status.id,
+            testId: `board-filter-status-${status.id}`,
+            onSelect: () => {
+              onChange(
+                withStatusFilter(
+                  filters,
+                  filters.taskStatusId === status.id ? null : status.id
+                )
+              );
+              setOpen(false);
+            }
+          },
+          status.id
+        ))
+      ] }) : null,
+      tags.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "px-2.5 py-1 text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground", children: t("staff.time_tracking.board.filters.tag", "Tag") }),
+        tags.map((tag) => {
+          const selected = filters.tagIds.includes(tag.id);
+          return /* @__PURE__ */ jsx(
+            PickerRow,
+            {
+              label: tag.label,
+              selected,
+              testId: `board-filter-tag-${tag.id}`,
+              onSelect: () => {
+                onChange(
+                  selected ? withoutTagFilter(filters, tag.id) : withTagFilter(filters, tag.id)
+                );
+                setOpen(false);
+              }
+            },
+            tag.id
+          );
+        })
+      ] }) : null,
+      !self && otherMembers.length === 0 && statuses.length === 0 && tags.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2.5 py-6 text-center text-xs leading-normal text-muted-foreground", children: t("staff.time_tracking.board.filters.noOptions", "Nothing to filter by yet.") }) : null
+    ] }) })
+  ] });
+}
+function BoardFilterChips({
+  filters,
+  onChange,
+  self,
+  statuses
+}) {
+  const t = useT();
+  const assigneeIds = React.useMemo(
+    () => filters.assigneeStaffMemberId && filters.assigneeStaffMemberId !== self?.id ? [filters.assigneeStaffMemberId] : [],
+    [filters.assigneeStaffMemberId, self?.id]
+  );
+  const assigneeNames = useAssigneeNames(assigneeIds);
+  const tagLabels = useTagLabels(filters.tagIds);
+  const activeStatus = React.useMemo(
+    () => statuses.find((status) => status.id === filters.taskStatusId) ?? null,
+    [filters.taskStatusId, statuses]
+  );
+  const assignedToMeLabel = t("staff.time_tracking.board.filters.assignedToMe", "Assigned to me");
+  const isSelf = !!filters.assigneeStaffMemberId && filters.assigneeStaffMemberId === self?.id;
+  const assigneeLabel = isSelf ? assignedToMeLabel : filters.assigneeStaffMemberId ? assigneeNames.data?.get(filters.assigneeStaffMemberId) ?? filters.assigneeStaffMemberId : null;
+  const removeLabel = React.useCallback(
+    (label) => t("staff.time_tracking.board.filters.remove", "Remove filter: {label}", { label }),
+    [t]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-testid": "board-filter-chips", children: [
+    assigneeLabel ? /* @__PURE__ */ jsx(
+      FilterChip,
+      {
+        label: assigneeLabel,
+        avatarLabel: isSelf ? self?.displayName ?? assignedToMeLabel : assigneeLabel,
+        removeLabel: removeLabel(assigneeLabel),
+        testId: "board-filter-chip-assignee",
+        onRemove: () => onChange(withAssigneeFilter(filters, null))
+      }
+    ) : null,
+    activeStatus ? /* @__PURE__ */ jsx(
+      FilterChip,
+      {
+        label: activeStatus.name,
+        removeLabel: removeLabel(activeStatus.name),
+        testId: "board-filter-chip-status",
+        onRemove: () => onChange(withStatusFilter(filters, null))
+      }
+    ) : null,
+    filters.tagIds.map((tagId) => {
+      const label = tagLabels.data?.get(tagId) ?? tagId;
+      return /* @__PURE__ */ jsx(
+        FilterChip,
+        {
+          label,
+          removeLabel: removeLabel(label),
+          testId: `board-filter-chip-tag-${tagId}`,
+          onRemove: () => onChange(withoutTagFilter(filters, tagId))
+        },
+        tagId
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      AddBoardFilterPopover,
+      {
+        filters,
+        onChange,
+        self,
+        statuses,
+        trigger: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "data-testid": "board-filter-add-chip",
+            className: `h-auto ${chipClassName(true)}`,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-3", "aria-hidden": "true" }),
+              t("staff.time_tracking.board.filters.add", "Add filter")
+            ]
+          }
+        )
+      }
+    ),
+    countActiveBoardFilters(filters) > 1 ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        size: "2xs",
+        onClick: () => onChange({ assigneeStaffMemberId: null, taskStatusId: null, tagIds: [] }),
+        "data-testid": "board-filter-clear",
+        className: "h-auto px-1 text-xs leading-normal text-muted-foreground hover:text-foreground",
+        children: t("staff.time_tracking.board.filters.clear", "Clear filters")
+      }
+    ) : null
+  ] });
+}
+var BoardFilterChips_default = BoardFilterChips;
+export {
+  AddBoardFilterPopover,
+  BoardFilterChips,
+  BoardFilterChips_default as default
+};
+//# sourceMappingURL=BoardFilterChips.js.map

package/dist/modules/staff/lib/time-tracking-ui/BoardFilterChips.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/staff/lib/time-tracking-ui/BoardFilterChips.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, Plus, X } from 'lucide-react'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  useAssigneeNames,\n  useStaffMemberDirectory,\n  useTagDirectory,\n  useTagLabels,\n  type BoardSelf,\n} from './boardDirectory'\nimport {\n  countActiveBoardFilters,\n  withAssigneeFilter,\n  withStatusFilter,\n  withTagFilter,\n  withoutTagFilter,\n  type BoardFilters,\n} from './boardFilters'\nimport type { BoardStatus } from './kanbanBoardData'\n\n/**\n * The `dt-chips` row of screen 6 and the picker behind it.\n *\n * Modelled on the deals pipeline filter surfaces (`customers/.../pipeline/components`):\n * a popover-backed picker, chips that carry their own removal, one idiom for the whole\n * product. The difference the mockup asks for is the *shape* of the row \u2014 the pipeline\n * shows one chip per filter kind with its current value, screen 6 shows one chip per\n * active filter plus a dashed \"Dodaj filtr\" \u2014 so the chrome is shared in spirit rather\n * than by importing a component out of another module's page folder.\n *\n * \"Przypisane do mnie\" is the first entry in the picker and one click: it is the filter\n * an operator reaches for far more often than any other, so it does not sit behind a\n * person search.\n */\n\ntype BoardFilterSurfaceProps = {\n  filters: BoardFilters\n  onChange: (next: BoardFilters) => void\n  self: BoardSelf | null\n  statuses: readonly BoardStatus[]\n}\n\nfunction chipClassName(dashed: boolean): string {\n  const base =\n    'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs leading-normal text-foreground'\n  return dashed\n    ? `${base} border border-dashed border-muted-foreground/60 bg-transparent text-muted-foreground hover:bg-muted/60`\n    : `${base} border border-border bg-card`\n}\n\nfunction FilterChip({\n  label,\n  avatarLabel,\n  removeLabel,\n  onRemove,\n  testId,\n}: {\n  label: string\n  avatarLabel?: string | null\n  removeLabel: string\n  onRemove: () => void\n  testId: string\n}): React.ReactElement {\n  return (\n    <span className={chipClassName(false)} data-testid={testId}>\n      {avatarLabel ? <Avatar size=\"xs\" label={avatarLabel} variant=\"monochrome\" /> : null}\n      <span className=\"max-w-48 truncate font-semibold\">{label}</span>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"2xs\"\n        onClick={onRemove}\n        aria-label={removeLabel}\n        data-testid={`${testId}-remove`}\n        className=\"size-4 rounded-full p-0 text-muted-foreground hover:text-foreground\"\n      >\n        <X className=\"size-3\" aria-hidden=\"true\" />\n      </Button>\n    </span>\n  )\n}\n\nfunction PickerRow({\n  label,\n  selected,\n  avatarLabel,\n  onSelect,\n  testId,\n}: {\n  label: string\n  selected: boolean\n  avatarLabel?: string | null\n  onSelect: () => void\n  testId: string\n}): React.ReactElement {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      role=\"checkbox\"\n      aria-checked={selected}\n      onClick={onSelect}\n      data-testid={testId}\n      className={`h-auto w-full justify-start gap-2.5 rounded-md px-2.5 py-2 text-left text-sm font-normal ${\n        selected ? 'bg-muted/60' : 'bg-transparent'\n      }`}\n    >\n      {avatarLabel ? <Avatar size=\"xs\" label={avatarLabel} variant=\"monochrome\" /> : null}\n      <span className=\"truncate text-foreground\">{label}</span>\n      {selected ? <Check className=\"ml-auto size-3.5 text-muted-foreground\" aria-hidden=\"true\" /> : null}\n    </Button>\n  )\n}\n\nexport function AddBoardFilterPopover({\n  filters,\n  onChange,\n  self,\n  statuses,\n  trigger,\n  testId = 'board-filter-add',\n}: BoardFilterSurfaceProps & {\n  trigger: React.ReactNode\n  testId?: string\n}): React.ReactElement {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const tagDirectory = useTagDirectory(open)\n  const memberDirectory = useStaffMemberDirectory(open)\n\n  const tags = tagDirectory.data ?? []\n  const otherMembers = React.useMemo(\n    () => (memberDirectory.data ?? []).filter((member) => member.id !== self?.id),\n    [memberDirectory.data, self?.id],\n  )\n\n  const assignedToMeLabel = t('staff.time_tracking.board.filters.assignedToMe', 'Assigned to me')\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-72 p-0\" data-testid={`${testId}-popover`}>\n        <div className=\"max-h-96 overflow-y-auto p-2\">\n          {self ? (\n            <PickerRow\n              label={assignedToMeLabel}\n              avatarLabel={self.displayName ?? assignedToMeLabel}\n              selected={filters.assigneeStaffMemberId === self.id}\n              testId=\"board-filter-assigned-to-me\"\n              onSelect={() => {\n                onChange(\n                  withAssigneeFilter(\n                    filters,\n                    filters.assigneeStaffMemberId === self.id ? null : self.id,\n                  ),\n                )\n                setOpen(false)\n              }}\n            />\n          ) : null}\n\n          {otherMembers.length > 0 ? (\n            <div className=\"mt-2 flex flex-col gap-0.5\">\n              <span className=\"px-2.5 py-1 text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground\">\n                {t('staff.time_tracking.board.filters.assignee', 'Assignee')}\n              </span>\n              {otherMembers.map((member) => (\n                <PickerRow\n                  key={member.id}\n                  label={member.displayName}\n                  avatarLabel={member.displayName}\n                  selected={filters.assigneeStaffMemberId === member.id}\n                  testId={`board-filter-assignee-${member.id}`}\n                  onSelect={() => {\n                    onChange(\n                      withAssigneeFilter(\n                        filters,\n                        filters.assigneeStaffMemberId === member.id ? null : member.id,\n                      ),\n                    )\n                    setOpen(false)\n                  }}\n                />\n              ))}\n            </div>\n          ) : null}\n\n          {statuses.length > 0 ? (\n            <div className=\"mt-2 flex flex-col gap-0.5\">\n              <span className=\"px-2.5 py-1 text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground\">\n                {t('staff.time_tracking.board.filters.status', 'Status')}\n              </span>\n              {statuses.map((status) => (\n                <PickerRow\n                  key={status.id}\n                  label={status.name}\n                  selected={filters.taskStatusId === status.id}\n                  testId={`board-filter-status-${status.id}`}\n                  onSelect={() => {\n                    onChange(\n                      withStatusFilter(\n                        filters,\n                        filters.taskStatusId === status.id ? null : status.id,\n                      ),\n                    )\n                    setOpen(false)\n                  }}\n                />\n              ))}\n            </div>\n          ) : null}\n\n          {tags.length > 0 ? (\n            <div className=\"mt-2 flex flex-col gap-0.5\">\n              <span className=\"px-2.5 py-1 text-xs font-semibold uppercase leading-normal tracking-wide text-muted-foreground\">\n                {t('staff.time_tracking.board.filters.tag', 'Tag')}\n              </span>\n              {tags.map((tag) => {\n                const selected = filters.tagIds.includes(tag.id)\n                return (\n                  <PickerRow\n                    key={tag.id}\n                    label={tag.label}\n                    selected={selected}\n                    testId={`board-filter-tag-${tag.id}`}\n                    onSelect={() => {\n                      onChange(\n                        selected ? withoutTagFilter(filters, tag.id) : withTagFilter(filters, tag.id),\n                      )\n                      setOpen(false)\n                    }}\n                  />\n                )\n              })}\n            </div>\n          ) : null}\n\n          {!self && otherMembers.length === 0 && statuses.length === 0 && tags.length === 0 ? (\n            <p className=\"px-2.5 py-6 text-center text-xs leading-normal text-muted-foreground\">\n              {t('staff.time_tracking.board.filters.noOptions', 'Nothing to filter by yet.')}\n            </p>\n          ) : null}\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport function BoardFilterChips({\n  filters,\n  onChange,\n  self,\n  statuses,\n}: BoardFilterSurfaceProps): React.ReactElement {\n  const t = useT()\n\n  const assigneeIds = React.useMemo(\n    () =>\n      filters.assigneeStaffMemberId && filters.assigneeStaffMemberId !== self?.id\n        ? [filters.assigneeStaffMemberId]\n        : [],\n    [filters.assigneeStaffMemberId, self?.id],\n  )\n  const assigneeNames = useAssigneeNames(assigneeIds)\n  const tagLabels = useTagLabels(filters.tagIds)\n\n  const activeStatus = React.useMemo(\n    () => statuses.find((status) => status.id === filters.taskStatusId) ?? null,\n    [filters.taskStatusId, statuses],\n  )\n\n  const assignedToMeLabel = t('staff.time_tracking.board.filters.assignedToMe', 'Assigned to me')\n  const isSelf = !!filters.assigneeStaffMemberId && filters.assigneeStaffMemberId === self?.id\n  const assigneeLabel = isSelf\n    ? assignedToMeLabel\n    : filters.assigneeStaffMemberId\n      ? assigneeNames.data?.get(filters.assigneeStaffMemberId) ?? filters.assigneeStaffMemberId\n      : null\n\n  const removeLabel = React.useCallback(\n    (label: string) =>\n      t('staff.time_tracking.board.filters.remove', 'Remove filter: {label}', { label }),\n    [t],\n  )\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\" data-testid=\"board-filter-chips\">\n      {assigneeLabel ? (\n        <FilterChip\n          label={assigneeLabel}\n          avatarLabel={isSelf ? self?.displayName ?? assignedToMeLabel : assigneeLabel}\n          removeLabel={removeLabel(assigneeLabel)}\n          testId=\"board-filter-chip-assignee\"\n          onRemove={() => onChange(withAssigneeFilter(filters, null))}\n        />\n      ) : null}\n\n      {activeStatus ? (\n        <FilterChip\n          label={activeStatus.name}\n          removeLabel={removeLabel(activeStatus.name)}\n          testId=\"board-filter-chip-status\"\n          onRemove={() => onChange(withStatusFilter(filters, null))}\n        />\n      ) : null}\n\n      {filters.tagIds.map((tagId) => {\n        const label = tagLabels.data?.get(tagId) ?? tagId\n        return (\n          <FilterChip\n            key={tagId}\n            label={label}\n            removeLabel={removeLabel(label)}\n            testId={`board-filter-chip-tag-${tagId}`}\n            onRemove={() => onChange(withoutTagFilter(filters, tagId))}\n          />\n        )\n      })}\n\n      <AddBoardFilterPopover\n        filters={filters}\n        onChange={onChange}\n        self={self}\n        statuses={statuses}\n        trigger={\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            data-testid=\"board-filter-add-chip\"\n            className={`h-auto ${chipClassName(true)}`}\n          >\n            <Plus className=\"size-3\" aria-hidden=\"true\" />\n            {t('staff.time_tracking.board.filters.add', 'Add filter')}\n          </Button>\n        }\n      />\n\n      {countActiveBoardFilters(filters) > 1 ? (\n        <Button\n          type=\"button\"\n          variant=\"link\"\n          size=\"2xs\"\n          onClick={() => onChange({ assigneeStaffMemberId: null, taskStatusId: null, tagIds: [] })}\n          data-testid=\"board-filter-clear\"\n          className=\"h-auto px-1 text-xs leading-normal text-muted-foreground hover:text-foreground\"\n        >\n          {t('staff.time_tracking.board.filters.clear', 'Clear filters')}\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\nexport default BoardFilterChips\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/staff/lib/time-tracking-ui/CustomerPicker.js

@@ -0,0 +1,324 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Building2, Plus, UserRound } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { SegmentedControl, SegmentedControlItem } from "@open-mercato/ui/primitives/segmented-control";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@open-mercato/ui/primitives/dialog";
+import { LookupSelect } from "@open-mercato/ui/backend/inputs/LookupSelect";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { createCrud } from "@open-mercato/ui/backend/utils/crud";
+import { useOrganizationScopeDetail } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const PAGE_SIZE = 20;
+function readString(value) {
+  return typeof value === "string" && value.trim().length > 0 ? value.trim() : null;
+}
+function readTaxId(row) {
+  return readString(row.taxId) ?? readString(row.tax_id) ?? readString(row.vat_id);
+}
+function toSelection(row, kind) {
+  const id = readString(row.id);
+  if (!id) return null;
+  const name = readString(row.display_name) ?? readString(row.displayName) ?? readString(row.legal_name) ?? readString(row.primary_email) ?? id;
+  return {
+    id,
+    name,
+    kind,
+    email: readString(row.primary_email) ?? readString(row.primaryEmail),
+    taxId: readTaxId(row)
+  };
+}
+async function fetchCustomerPage(resource, params) {
+  const kind = resource === "people" ? "person" : "company";
+  const search = new URLSearchParams({ page: "1", pageSize: String(PAGE_SIZE), ...params });
+  try {
+    const res = await apiCall(`/api/customers/${resource}?${search.toString()}`);
+    const items = Array.isArray(res.result?.items) ? res.result.items : [];
+    return items.map((row) => toSelection(row, kind)).filter((row) => row !== null);
+  } catch {
+    return [];
+  }
+}
+async function searchCustomers(query) {
+  const trimmed = query.trim();
+  const params = trimmed.length > 0 ? { search: trimmed } : {};
+  const [people, companies] = await Promise.all([
+    fetchCustomerPage("people", params),
+    fetchCustomerPage("companies", params)
+  ]);
+  return [...companies, ...people];
+}
+async function resolveCustomerById(customerId) {
+  const [people, companies] = await Promise.all([
+    fetchCustomerPage("people", { id: customerId, pageSize: "1" }),
+    fetchCustomerPage("companies", { id: customerId, pageSize: "1" })
+  ]);
+  return companies[0] ?? people[0] ?? null;
+}
+function NewCustomerDialog({ open, onOpenChange, onCreated }) {
+  const t = useT();
+  const { organizationId } = useOrganizationScopeDetail();
+  const [kind, setKind] = React.useState("company");
+  const [displayName, setDisplayName] = React.useState("");
+  const [firstName, setFirstName] = React.useState("");
+  const [lastName, setLastName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [saving, setSaving] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    if (open) return;
+    setKind("company");
+    setDisplayName("");
+    setFirstName("");
+    setLastName("");
+    setEmail("");
+    setError(null);
+    setSaving(false);
+  }, [open]);
+  const submit = React.useCallback(async () => {
+    if (saving) return;
+    const trimmedEmail = email.trim();
+    const resource = kind === "company" ? "companies" : "people";
+    const name = kind === "company" ? displayName.trim() : [firstName.trim(), lastName.trim()].filter(Boolean).join(" ");
+    if (kind === "company" && !displayName.trim()) {
+      setError(t("staff.time_tracking.projects.customer.new.nameRequired", "A name is required."));
+      return;
+    }
+    if (kind === "person" && (!firstName.trim() || !lastName.trim())) {
+      setError(t("staff.time_tracking.projects.customer.new.nameRequired", "A name is required."));
+      return;
+    }
+    const payload = organizationId ? { organizationId } : {};
+    if (kind === "company") {
+      payload.displayName = displayName.trim();
+    } else {
+      payload.firstName = firstName.trim();
+      payload.lastName = lastName.trim();
+      payload.displayName = name;
+    }
+    if (trimmedEmail) payload.primaryEmail = trimmedEmail;
+    setSaving(true);
+    setError(null);
+    try {
+      const { result } = await createCrud(
+        `customers/${resource}`,
+        payload,
+        { errorMessage: t("staff.time_tracking.projects.customer.new.error", "Failed to create the customer.") }
+      );
+      const id = readString(result?.entityId) ?? readString(result?.id);
+      if (!id) {
+        setError(t("staff.time_tracking.projects.customer.new.error", "Failed to create the customer."));
+        return;
+      }
+      onCreated({ id, name, kind, email: trimmedEmail || null, taxId: null });
+      onOpenChange(false);
+    } catch (err) {
+      setError(
+        err instanceof Error && err.message ? err.message : t("staff.time_tracking.projects.customer.new.error", "Failed to create the customer.")
+      );
+    } finally {
+      setSaving(false);
+    }
+  }, [displayName, email, firstName, kind, lastName, onCreated, onOpenChange, organizationId, saving, t]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+        event.preventDefault();
+        void submit();
+      }
+    },
+    [submit]
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("staff.time_tracking.projects.customer.new.title", "New customer") }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs(
+        SegmentedControl,
+        {
+          value: kind,
+          onValueChange: (next) => setKind(next),
+          "aria-label": t("staff.time_tracking.projects.customer.new.kind", "Customer type"),
+          children: [
+            /* @__PURE__ */ jsx(SegmentedControlItem, { value: "company", children: t("staff.time_tracking.projects.customer.new.company", "Company") }),
+            /* @__PURE__ */ jsx(SegmentedControlItem, { value: "person", children: t("staff.time_tracking.projects.customer.new.person", "Sole trader") })
+          ]
+        }
+      ),
+      kind === "company" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "tt-new-customer-name", children: t("staff.time_tracking.projects.customer.new.name", "Name") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "tt-new-customer-name",
+            value: displayName,
+            autoFocus: true,
+            onChange: (event) => setDisplayName(event.target.value)
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "tt-new-customer-first", children: t("staff.time_tracking.projects.customer.new.firstName", "First name") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "tt-new-customer-first",
+              value: firstName,
+              autoFocus: true,
+              onChange: (event) => setFirstName(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "tt-new-customer-last", children: t("staff.time_tracking.projects.customer.new.lastName", "Last name") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "tt-new-customer-last",
+              value: lastName,
+              onChange: (event) => setLastName(event.target.value)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "tt-new-customer-email", children: t("staff.time_tracking.projects.customer.new.email", "Email") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "tt-new-customer-email",
+            type: "email",
+            value: email,
+            onChange: (event) => setEmail(event.target.value)
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text", children: error }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: t("staff.time_tracking.projects.form.actions.cancel", "Cancel") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => void submit(), disabled: saving, children: t("staff.time_tracking.projects.customer.new.submit", "Create customer") })
+    ] })
+  ] }) });
+}
+function CustomerPicker({ value, snapshot, disabled, onChange }) {
+  const t = useT();
+  const [known, setKnown] = React.useState(() => {
+    const initial = /* @__PURE__ */ new Map();
+    if (snapshot?.id) initial.set(snapshot.id, snapshot);
+    return initial;
+  });
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (!value || known.has(value)) return;
+    let cancelled = false;
+    void resolveCustomerById(value).then((resolved) => {
+      if (cancelled || !resolved) return;
+      setKnown((prev) => new Map(prev).set(resolved.id, resolved));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [value, known]);
+  const fetchItems = React.useCallback(async (query) => {
+    const results = await searchCustomers(query);
+    setKnown((prev) => {
+      const next = new Map(prev);
+      results.forEach((row) => next.set(row.id, row));
+      return next;
+    });
+    return results.map((row) => ({
+      id: row.id,
+      title: row.name,
+      subtitle: row.email ?? null,
+      icon: row.kind === "company" ? /* @__PURE__ */ jsx(Building2, { className: "h-4 w-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(UserRound, { className: "h-4 w-4", "aria-hidden": true }),
+      badge: row.kind === "company" ? t("staff.time_tracking.projects.customer.kind.company", "Company") : t("staff.time_tracking.projects.customer.kind.person", "Sole trader")
+    }));
+  }, [t]);
+  const handleChange = React.useCallback(
+    (next) => {
+      if (!next) {
+        onChange(null);
+        return;
+      }
+      onChange(known.get(next) ?? { id: next, name: next, kind: "company" });
+    },
+    [known, onChange]
+  );
+  const handleCreated = React.useCallback(
+    (customer) => {
+      setKnown((prev) => new Map(prev).set(customer.id, customer));
+      onChange(customer);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      LookupSelect,
+      {
+        value,
+        onChange: handleChange,
+        fetchItems,
+        disabled,
+        defaultOpen: false,
+        minQuery: 2,
+        placeholder: t("staff.time_tracking.projects.customer.placeholder", "Search customers\u2026"),
+        selectedHintLabel: (id) => known.get(id)?.name ?? id,
+        actionSlot: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setDialogOpen(true), children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": true }),
+          t("staff.time_tracking.projects.customer.new.trigger", "New customer")
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(NewCustomerDialog, { open: dialogOpen, onOpenChange: setDialogOpen, onCreated: handleCreated })
+  ] });
+}
+function CustomerPickerBinding({
+  value,
+  values,
+  disabled,
+  setValue,
+  setFormValue
+}) {
+  const customerId = typeof value === "string" && value.length > 0 ? value : null;
+  const snapshot = React.useMemo(() => {
+    const name = typeof values?.customerName === "string" ? values.customerName : null;
+    if (!customerId || !name) return null;
+    const kind = values?.customerKind === "person" ? "person" : "company";
+    const taxId = typeof values?.customerTaxId === "string" ? values.customerTaxId : null;
+    return { id: customerId, name, kind, taxId };
+  }, [customerId, values?.customerKind, values?.customerName, values?.customerTaxId]);
+  const handleChange = React.useCallback(
+    (next) => {
+      setValue(next?.id ?? null);
+      setFormValue?.("customerName", next?.name ?? null);
+      setFormValue?.("customerKind", next?.kind ?? null);
+      setFormValue?.("customerTaxId", next?.taxId ?? null);
+    },
+    [setFormValue, setValue]
+  );
+  return /* @__PURE__ */ jsx(
+    CustomerPicker,
+    {
+      value: customerId,
+      snapshot,
+      disabled,
+      onChange: handleChange
+    }
+  );
+}
+export {
+  CustomerPicker,
+  CustomerPickerBinding,
+  resolveCustomerById,
+  searchCustomers
+};
+//# sourceMappingURL=CustomerPicker.js.map