@tesouro/embedded-components-react 0.2.1

package/dist/libs/tesouro-embedded-components-react/counterparts-widget/ui/dist/index3.js

@@ -0,0 +1,218 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { ArrowUpIcon as q, ArrowDownIcon as J, ArrowUpDownIcon as M, SearchIcon as Q } from "lucide-react";
+import { Typography as W, Button as b, DataTable as X, Input as Y, Select as Z, SelectTrigger as $, SelectValue as ee, SelectContent as te, SelectItem as w, Skeleton as ae } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "@radix-ui/react-use-controllable-state";
+import "react";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import { EmptyState as ie } from "../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as C } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import { COUNTERPARTS_SCREEN_LABELS_EN as ne } from "./index2.js";
+const re = "all", oe = [10, 25, 50, 100];
+function le({
+  labels: i,
+  searchValue: o,
+  onSearchChange: l,
+  entityFilter: m,
+  onEntityFilterChange: g,
+  disabled: s
+}) {
+  return /* @__PURE__ */ r("div", { className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-2 ttw:px-4", children: [
+    /* @__PURE__ */ r("div", { className: "ttw:relative ttw:w-80", children: [
+      /* @__PURE__ */ e(Q, { className: "ttw:pointer-events-none ttw:absolute ttw:left-3 ttw:top-1/2 ttw:size-4 ttw:-translate-y-1/2 ttw:text-muted-foreground" }),
+      /* @__PURE__ */ e(
+        Y,
+        {
+          className: "ttw:pl-9",
+          placeholder: i.searchPlaceholder,
+          value: o,
+          disabled: s,
+          onChange: (u) => l(u.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(
+      Z,
+      {
+        value: m,
+        onValueChange: g,
+        disabled: s,
+        children: [
+          /* @__PURE__ */ e($, { className: "ttw:w-44", children: /* @__PURE__ */ e(ee, {}) }),
+          /* @__PURE__ */ r(te, { children: [
+            /* @__PURE__ */ e(w, { value: re, children: i.entityFilterAll }),
+            /* @__PURE__ */ e(w, { value: "individual", children: i.entityFilterIndividual }),
+            /* @__PURE__ */ e(w, { value: "organization", children: i.entityFilterOrganization })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function d({
+  value: i,
+  isLoading: o,
+  colorClass: l
+}) {
+  return /* @__PURE__ */ e("div", { className: "ttw:flex ttw:justify-end", children: o ? /* @__PURE__ */ e(ae, { className: "ttw:h-4 ttw:w-20" }) : /* @__PURE__ */ e("span", { className: l, children: i }) });
+}
+function ve({
+  mode: i,
+  counterparts: o,
+  isLoading: l,
+  isError: m,
+  sorting: g,
+  onSortingChange: s,
+  pageSize: u,
+  onPageSizeChange: S,
+  pageSizeOptions: A = oe,
+  hasNextPage: L,
+  hasPrevPage: P,
+  onNextPage: E,
+  onPrevPage: R,
+  searchValue: p,
+  onSearchChange: T,
+  entityFilter: z,
+  onEntityFilterChange: O,
+  isFiltering: c,
+  canCreate: D = !0,
+  isAccessRestricted: v,
+  onCreateClick: y,
+  onRowClick: F,
+  onRetry: N,
+  labels: j
+}) {
+  const t = { ...ne, ...j }, n = i === "customer", I = n ? t.customersTitle : t.vendorsTitle, k = n ? t.columnReceivedAmount : t.columnTotalPaidToDate, B = n ? t.columnAmountDue : t.columnBalanceDue, K = [
+    {
+      accessorKey: "name",
+      header: ({ column: a }) => {
+        const h = a.getIsSorted();
+        return /* @__PURE__ */ r("div", { className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-inherit", children: [
+          t.columnName,
+          /* @__PURE__ */ e(
+            b,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": t.sortByName,
+              onClick: () => a.toggleSorting(h === "asc"),
+              children: h === "asc" ? /* @__PURE__ */ e(q, { className: "ttw:size-4" }) : h === "desc" ? /* @__PURE__ */ e(J, { className: "ttw:size-4" }) : /* @__PURE__ */ e(M, { className: "ttw:size-4" })
+            }
+          )
+        ] });
+      },
+      cell: ({ row: a }) => /* @__PURE__ */ r("div", { className: "ttw:flex ttw:flex-col ttw:gap-1", children: [
+        /* @__PURE__ */ e("span", { className: "ttw:font-medium", children: a.original.name }),
+        a.original.locationLabel && /* @__PURE__ */ e("span", { className: "ttw:text-sm ttw:text-muted-foreground", children: a.original.locationLabel })
+      ] })
+    },
+    {
+      accessorKey: "billedAmountLabel",
+      header: () => /* @__PURE__ */ e("div", { className: "ttw:text-right", children: t.columnBilledAmount }),
+      cell: ({ row: a }) => /* @__PURE__ */ e(
+        d,
+        {
+          value: a.original.billedAmountLabel,
+          isLoading: a.original.isBilledAmountLoading
+        }
+      )
+    },
+    {
+      accessorKey: "receivedOrPaidAmountLabel",
+      header: () => /* @__PURE__ */ e("div", { className: "ttw:text-right", children: k }),
+      cell: ({ row: a }) => /* @__PURE__ */ e(
+        d,
+        {
+          value: a.original.receivedOrPaidAmountLabel,
+          isLoading: a.original.isReceivedOrPaidAmountLoading,
+          colorClass: a.original.isReceivedOrPaidPositive ? "ttw:text-green-700" : void 0
+        }
+      )
+    },
+    ...n ? [] : [
+      {
+        accessorKey: "rejectedAmountLabel",
+        header: () => /* @__PURE__ */ e("div", { className: "ttw:text-right", children: t.columnRejectedAmount }),
+        cell: ({ row: a }) => /* @__PURE__ */ e(
+          d,
+          {
+            value: a.original.rejectedAmountLabel ?? "",
+            isLoading: a.original.isRejectedAmountLoading ?? !1,
+            colorClass: a.original.isRejectedAmountPositive ? "ttw:text-orange-700" : void 0
+          }
+        )
+      }
+    ],
+    {
+      accessorKey: "dueOrOwedAmountLabel",
+      header: () => /* @__PURE__ */ e("div", { className: "ttw:text-right", children: B }),
+      cell: ({ row: a }) => /* @__PURE__ */ e(
+        d,
+        {
+          value: a.original.dueOrOwedAmountLabel,
+          isLoading: a.original.isDueOrOwedAmountLoading
+        }
+      )
+    }
+  ], V = n ? t.customersEmptyTitle : t.vendorsEmptyTitle, U = n ? t.customersEmptyDescription : t.vendorsEmptyDescription, _ = n ? t.customersEmptyAction : t.vendorsEmptyAction, G = n ? t.customersFilterEmptyTitle : t.vendorsFilterEmptyTitle, H = !c && !p && !o.length && !l, f = !!(D && !v), x = !!(!c && f);
+  return /* @__PURE__ */ r("div", { className: "ttw:flex ttw:flex-col ttw:gap-4", children: [
+    /* @__PURE__ */ r("div", { className: "ttw:flex ttw:items-center ttw:justify-between", children: [
+      /* @__PURE__ */ e(W, { component: "h2", variant: "h6", className: "ttw:font-semibold", children: I }),
+      f && /* @__PURE__ */ e(b, { onClick: y, children: t.createButton })
+    ] }),
+    v ? /* @__PURE__ */ e(
+      C,
+      {
+        title: t.accessRestrictedTitle,
+        description: t.accessRestrictedDescription
+      }
+    ) : m ? /* @__PURE__ */ e(
+      C,
+      {
+        title: t.errorTitle,
+        description: t.errorDescription,
+        retryLabel: N ? t.errorRetry : void 0,
+        onRetry: N
+      }
+    ) : /* @__PURE__ */ e(
+      X,
+      {
+        columns: K,
+        data: o,
+        isLoading: l,
+        sorting: g,
+        onSortingChange: s,
+        pageSize: u,
+        onPageSizeChange: S,
+        pageSizeOptions: A,
+        hasNextPage: L,
+        hasPrevPage: P,
+        onNextPage: E,
+        onPrevPage: R,
+        onRowClick: F,
+        filterComponent: /* @__PURE__ */ e(
+          le,
+          {
+            labels: t,
+            searchValue: p,
+            onSearchChange: T,
+            entityFilter: z,
+            onEntityFilterChange: O,
+            disabled: H
+          }
+        ),
+        children: /* @__PURE__ */ e(
+          ie,
+          {
+            title: c ? G : V,
+            description: c ? t.filterEmptyDescription : U,
+            actionLabel: x ? _ : void 0,
+            onAction: x ? y : void 0
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ve as CounterpartsScreen
+};