@sebgroup/green-core 3.8.1 → 3.10.0

package/components/table/table.stories.data.js

@@ -10,13 +10,13 @@ let feedbackPromise = null;
 const defineSlots = (row) => ({
   ...row,
   name: Slot(row.name, ["avatar", "value"]),
-  // name: Slot(row.name, ['avatar', 'value'], row.email),
   email: Slot(row.email, ["value", "copy-button"]),
   status: Slot(row.status, ["status"]),
   amount: Slot(row.amount, ["amount", "currency"]),
   account: Slot(row.account, ["main"]),
   login: Slot(row.lastLogin, ["main"]),
-  download: Slot(row.download ?? "#", ["main"])
+  download: Slot(row.download ?? "#", ["main"]),
+  actions: Slot(void 0, ["main"])
 });
 let usersRawCache = null;
 let usersRawPromise = null;
@@ -73,12 +73,14 @@ const Users = {
     {
       key: "id",
       label: "ID",
-      sortable: false
+      sortable: false,
+      width: "6ch"
     },
     {
       key: "name",
       label: "Name",
-      sortable: true
+      sortable: true,
+      width: "28ch"
     },
     {
       key: "email",
@@ -121,12 +123,14 @@ const Users = {
     {
       key: "download",
       label: "Download"
+    },
+    {
+      key: "actions",
+      label: "Actions",
+      justify: "end",
+      sticky: "right"
     }
   ],
-  Actions: {
-    label: "Actions",
-    justify: "end"
-  },
   Tfoot: {
     label: "Totals",
     sticky: true
@@ -335,22 +339,25 @@ const actionsStaticRows = [
 ];
 const actionsDataProvider = async (request) => {
   const start = (request.page - 1) * request.rows;
-  const page = actionsStaticRows.slice(start, start + request.rows);
+  const page = actionsStaticRows.slice(start, start + request.rows).map((row) => ({
+    ...row,
+    actions: Slot(void 0, ["main"], row.id)
+  }));
   return { rows: page, total: actionsStaticRows.length };
 };
 const Actions = {
   Columns: [
     { key: "task", label: "Task", align: "center" },
     { key: "assignee", label: "Assignee", align: "center" },
-    { key: "priority", label: "Priority", align: "center", width: "100px" }
+    { key: "priority", label: "Priority", align: "center", width: "100px" },
+    {
+      key: "actions",
+      label: "Actions",
+      align: "center",
+      justify: "end",
+      sticky: "right"
+    }
   ],
-  MultipleActions: {
-    label: "Actions",
-    align: "center",
-    justify: "start",
-    // width: '150px',
-    sticky: true
-  },
   MultipleActionsSlotContent: (rows) => {
     return html`
       ${rows.map(
@@ -375,13 +382,6 @@ const Actions = {
     )}
     `;
   },
-  ActionLink: {
-    label: "Actions",
-    align: "center",
-    justify: "end",
-    // width: '150px',
-    sticky: true
-  },
   ActionLinkSlotContent: (rows) => {
     return html`
       ${rows.map(
@@ -397,13 +397,6 @@ const Actions = {
     )}
     `;
   },
-  ActionContextMenu: {
-    label: "Actions",
-    align: "center",
-    justify: "end",
-    // width: '150px',
-    sticky: true
-  },
   ActionContextMenuSlotContent: (rows) => {
     return html`
       ${rows.map(
@@ -422,8 +415,689 @@ const Actions = {
   },
   Data: actionsDataProvider
 };
+const financeBaseRows = [
+  {
+    id: 201,
+    account: "SEB Payroll Main",
+    accountNumber: "5001 10 123 45",
+    owner: "Nordic Retail AB",
+    segment: "Operating",
+    currency: "SEK",
+    amount: 125e4,
+    available: 98e4,
+    status: "Healthy",
+    lastUpdated: "2026-03-01",
+    expansionMode: "children"
+  },
+  {
+    id: 202,
+    account: "SEB Liquidity Reserve",
+    accountNumber: "5001 10 128 01",
+    owner: "Nordic Retail AB",
+    segment: "Treasury",
+    currency: "SEK",
+    amount: 34e5,
+    available: 3389e3,
+    status: "Healthy",
+    lastUpdated: "2026-03-01",
+    expansionMode: "full"
+  },
+  {
+    id: 203,
+    account: "SEB Project Escrow",
+    accountNumber: "5001 10 129 77",
+    owner: "Green Build One",
+    segment: "Escrow",
+    currency: "SEK",
+    amount: 49e4,
+    available: 21e4,
+    status: "Watch",
+    lastUpdated: "2026-03-02",
+    expansionMode: "children"
+  },
+  {
+    id: 204,
+    account: "SEB Vendor Settlement",
+    accountNumber: "5001 10 132 09",
+    owner: "Supply Chain Ops",
+    segment: "Operating",
+    currency: "SEK",
+    amount: 28e4,
+    available: 75e3,
+    status: "Risk",
+    lastUpdated: "2026-03-02",
+    expansionMode: "full"
+  },
+  {
+    id: 205,
+    account: "SEB FX Settlement Flow",
+    accountNumber: "5001 10 140 55",
+    owner: "Cross Border Team",
+    segment: "FX",
+    currency: "SEK",
+    amount: 77e4,
+    available: 59e4,
+    status: "Healthy",
+    lastUpdated: "2026-03-03",
+    expansionMode: "none"
+  },
+  {
+    id: 206,
+    account: "SEB Tax Holding",
+    accountNumber: "5001 10 143 88",
+    owner: "Tax Office",
+    segment: "Compliance",
+    currency: "SEK",
+    amount: 36e4,
+    available: 359900,
+    status: "Healthy",
+    lastUpdated: "2026-03-03",
+    expansionMode: "none"
+  },
+  {
+    id: 207,
+    account: "SEB Benefits Wallet",
+    accountNumber: "5001 10 147 31",
+    owner: "People Operations",
+    segment: "Payroll",
+    currency: "SEK",
+    amount: 42e4,
+    available: 165e3,
+    status: "Watch",
+    lastUpdated: "2026-03-04",
+    expansionMode: "children"
+  },
+  {
+    id: 208,
+    account: "SEB Capital Buffer",
+    accountNumber: "5001 10 149 92",
+    owner: "CFO Office",
+    segment: "Treasury",
+    currency: "SEK",
+    amount: 51e5,
+    available: 5095e3,
+    status: "Healthy",
+    lastUpdated: "2026-03-04",
+    expansionMode: "children"
+  },
+  {
+    id: 209,
+    account: "SEB M&A Holding",
+    accountNumber: "5001 10 151 66",
+    owner: "Strategy Group",
+    segment: "Investment",
+    currency: "SEK",
+    amount: 11e5,
+    available: 85e4,
+    status: "Watch",
+    lastUpdated: "2026-03-05",
+    expansionMode: "full"
+  },
+  {
+    id: 210,
+    account: "SEB Lease Clearing",
+    accountNumber: "5001 10 158 03",
+    owner: "Property Ops",
+    segment: "Operating",
+    currency: "SEK",
+    amount: 195e3,
+    available: 42e3,
+    status: "Risk",
+    lastUpdated: "2026-03-05",
+    expansionMode: "children"
+  },
+  {
+    id: 211,
+    account: "SEB Insurance Pool",
+    accountNumber: "5001 10 161 74",
+    owner: "Risk Management",
+    segment: "Insurance",
+    currency: "SEK",
+    amount: 62e4,
+    available: 6e5,
+    status: "Healthy",
+    lastUpdated: "2026-03-06",
+    expansionMode: "children"
+  },
+  {
+    id: 212,
+    account: "SEB Card Settlement",
+    accountNumber: "5001 10 166 20",
+    owner: "Payments Platform",
+    segment: "Payments",
+    currency: "SEK",
+    amount: 86e4,
+    available: 31e4,
+    status: "Watch",
+    lastUpdated: "2026-03-06",
+    expansionMode: "children"
+  }
+];
+const mapExpandedFinanceRows = (entries) => {
+  return entries.map((entry) => ({
+    ...entry,
+    account: Slot(entry.account, ["value"]),
+    amount: Slot(entry.amount, ["amount-value", "amount-currency"]),
+    available: Slot(entry.available, ["available-value", "available-currency"]),
+    status: Slot(entry.status, ["status"]),
+    accountNumber: String(entry.accountNumberDisplay ?? ""),
+    accountNumberDisplay: Slot(entry.accountNumberDisplay, ["main"]),
+    actions: Slot(void 0, ["main"])
+  }));
+};
+const financeRows = financeBaseRows.map((row) => ({
+  ...row.expansionMode === "children" ? {
+    isExpandable: true,
+    subRowCount: 2,
+    subRows: async () => {
+      const related = financeExpandedRowsById[Number(row.id)] ?? [];
+      await new Promise((resolve) => setTimeout(resolve, 180));
+      return mapExpandedFinanceRows(related);
+    }
+  } : row.expansionMode === "full" ? {
+    isExpandable: true,
+    subRowCount: 1,
+    fullContent: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 180));
+      return true;
+    }
+  } : {
+    isExpandable: row.expansionMode !== "none"
+  },
+  ...row,
+  account: Slot(row.account, ["account-icon", "value"]),
+  amount: Slot(row.amount, ["amount-value", "amount-currency"]),
+  available: Slot(row.available, ["available-value", "available-currency"]),
+  status: Slot(row.status, ["status"]),
+  accountNumberDisplay: Slot(row.accountNumber, ["main"]),
+  actions: Slot(void 0, ["main"])
+}));
+const financeExpandableData = async (request) => {
+  let data = [...financeRows];
+  if (request.searchQuery) {
+    const query = request.searchQuery.toLowerCase();
+    data = data.filter(
+      (row) => [
+        row.id,
+        row.account,
+        row.owner,
+        row.segment,
+        row.currency,
+        row.status,
+        row.accountNumber
+      ].join(" ").toLowerCase().includes(query)
+    );
+  }
+  if (request.sortColumn && data.length > 0) {
+    const key = request.sortColumn;
+    data.sort((a, b) => {
+      const aValue = String(a[key] ?? "");
+      const bValue = String(b[key] ?? "");
+      return request.sortDirection === "desc" ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue);
+    });
+  }
+  const start = (request.page - 1) * request.rows;
+  const end = start + request.rows;
+  return {
+    rows: data.slice(start, end),
+    total: data.length
+  };
+};
+const financeExpandedRowsById = {
+  201: [
+    {
+      id: "201-r1",
+      account: "Payroll Batch - March",
+      owner: "Nordic Retail AB",
+      segment: "Outgoing",
+      status: "Booked",
+      amount: 52e4,
+      available: 73e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-01",
+      accountNumberDisplay: "5001 10 123 45"
+    },
+    {
+      id: "201-r2",
+      account: "Payroll Tax Reserve",
+      owner: "Nordic Retail AB",
+      segment: "Reserved",
+      status: "Pending",
+      amount: 21e4,
+      available: 52e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-01",
+      accountNumberDisplay: "5001 10 123 45"
+    }
+  ],
+  203: [
+    {
+      id: "203-r1",
+      account: "Project Milestone A",
+      owner: "Green Build One",
+      segment: "Escrow Hold",
+      status: "Held",
+      amount: 18e4,
+      available: 31e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-02",
+      accountNumberDisplay: "5001 10 129 77"
+    },
+    {
+      id: "203-r2",
+      account: "Project Milestone B",
+      owner: "Green Build One",
+      segment: "Escrow Hold",
+      status: "Held",
+      amount: 11e4,
+      available: 2e5,
+      currency: "SEK",
+      lastUpdated: "2026-03-02",
+      accountNumberDisplay: "5001 10 129 77"
+    }
+  ],
+  205: [
+    {
+      id: "205-r1",
+      account: "Cross Border Payroll Bridge",
+      owner: "Cross Border Team",
+      segment: "FX Transfer",
+      status: "Booked",
+      amount: 24e4,
+      available: 53e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-03",
+      accountNumberDisplay: "5001 10 140 55"
+    }
+  ],
+  207: [
+    {
+      id: "207-r1",
+      account: "Benefits Payout Week 10",
+      owner: "People Operations",
+      segment: "Outgoing",
+      status: "Pending",
+      amount: 14e4,
+      available: 28e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-04",
+      accountNumberDisplay: "5001 10 147 31"
+    }
+  ],
+  208: [
+    {
+      id: "208-r1",
+      account: "Quarterly Buffer Allocation",
+      owner: "CFO Office",
+      segment: "Reserved",
+      status: "Booked",
+      amount: 7e5,
+      available: 4395e3,
+      currency: "SEK",
+      lastUpdated: "2026-03-04",
+      accountNumberDisplay: "5001 10 149 92"
+    }
+  ],
+  210: [
+    {
+      id: "210-r1",
+      account: "Lease Settlement Q1",
+      owner: "Property Ops",
+      segment: "Outgoing",
+      status: "Pending",
+      amount: 108e3,
+      available: 87e3,
+      currency: "SEK",
+      lastUpdated: "2026-03-05",
+      accountNumberDisplay: "5001 10 158 03"
+    }
+  ],
+  212: [
+    {
+      id: "212-r1",
+      account: "Card Clearing Morning",
+      owner: "Payments Platform",
+      segment: "Settled",
+      status: "Booked",
+      amount: 21e4,
+      available: 65e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-06",
+      accountNumberDisplay: "5001 10 166 20"
+    },
+    {
+      id: "212-r2",
+      account: "Card Clearing Afternoon",
+      owner: "Payments Platform",
+      segment: "Pending",
+      status: "Pending",
+      amount: 34e4,
+      available: 31e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-06",
+      accountNumberDisplay: "5001 10 166 20"
+    }
+  ],
+  211: [
+    {
+      id: "211-r1",
+      account: "Insurance Buffer Allocation",
+      owner: "Risk Management",
+      segment: "Reserved",
+      status: "Booked",
+      amount: 12e4,
+      available: 48e4,
+      currency: "SEK",
+      lastUpdated: "2026-03-06",
+      accountNumberDisplay: "5001 10 161 74"
+    }
+  ]
+};
+const ExpandableFinance = {
+  Columns: [
+    {
+      key: "account",
+      label: "Name",
+      sortable: true,
+      width: "28ch",
+      sticky: "left"
+    },
+    {
+      key: "owner",
+      label: "Owner",
+      sortable: true,
+      width: "22ch"
+    },
+    {
+      key: "segment",
+      label: "Segment",
+      sortable: true,
+      width: "14ch"
+    },
+    {
+      key: "status",
+      label: "Status",
+      sortable: true,
+      width: "12ch"
+    },
+    {
+      key: "accountNumberDisplay",
+      label: "Account",
+      sortable: true,
+      width: "18ch"
+    },
+    {
+      key: "amount",
+      label: "Booked",
+      sortable: true,
+      justify: "end"
+    },
+    {
+      key: "available",
+      label: "Balance",
+      sortable: true,
+      justify: "end"
+    },
+    {
+      key: "actions",
+      label: "Actions",
+      sortable: false,
+      justify: "end",
+      sticky: "right"
+    }
+  ],
+  Tfoot: {
+    label: "Totals",
+    sticky: true
+  },
+  Data: financeExpandableData,
+  SlotContent: (rows) => html`
+    ${rows.map(
+    (row) => html`
+        <gds-badge
+          slot="status:${row.id}:status"
+          size="small"
+          variant="${String(row.status) === "Healthy" ? "positive" : String(row.status) === "Watch" ? "warning" : "negative"}"
+        >
+          ${String(row.status)}
+        </gds-badge>
+
+        <gds-formatted-account
+          slot="accountNumberDisplay:${row.id}:main"
+          account="${String(
+      row.accountNumber ?? row.accountNumberDisplay ?? ""
+    )}"
+          format="seb-account"
+        ></gds-formatted-account>
+
+        <gds-badge
+          slot="account:${row.id}:account-icon"
+          size="small"
+          variant="information"
+        >
+          ${String(row.currency)}
+        </gds-badge>
+
+        <gds-formatted-number
+          slot="amount:${row.id}:amount-value"
+          .value=${Number(row.amount)}
+        ></gds-formatted-number>
+        <gds-badge slot="amount:${row.id}:amount-currency" size="small">
+          ${String(row.currency)}
+        </gds-badge>
+
+        <gds-formatted-number
+          slot="available:${row.id}:available-value"
+          .value=${Number(row.available)}
+        ></gds-formatted-number>
+        <gds-badge slot="available:${row.id}:available-currency" size="small">
+          ${String(row.currency)}
+        </gds-badge>
+
+        <gds-context-menu slot="actions:${row.id}:main">
+          <gds-button slot="trigger" rank="tertiary" size="small">
+            <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal>
+          </gds-button>
+          <gds-menu-item>Open account</gds-menu-item>
+          <gds-menu-item>View transactions</gds-menu-item>
+          <gds-menu-item>Export statement</gds-menu-item>
+        </gds-context-menu>
+
+        ${row.expansionMode === "full" && row.id === 204 ? html`
+              <gds-card
+                slot="expand:${row.id}:full"
+                variant="neutral-02-outlined"
+              >
+                <gds-flex flex-direction="column" gap="m" padding="m">
+                  <gds-flex
+                    justify-content="space-between"
+                    align-items="center"
+                    flex-wrap="wrap"
+                    gap="s"
+                  >
+                    <gds-flex flex-direction="column" gap="2xs">
+                      <gds-text font="heading-xs">
+                        Vendor Settlement Monitoring
+                      </gds-text>
+                      <gds-text font="detail-s-book">
+                        Available balance on ${String(row.account)} is below
+                        internal threshold for ${String(row.segment)}.
+                      </gds-text>
+                    </gds-flex>
+                    <gds-badge variant="negative" size="small"
+                      >Action needed</gds-badge
+                    >
+                  </gds-flex>
+
+                  <gds-grid columns="1; s{1}; m{2}; l{3}" gap="s">
+                    <gds-card variant="neutral-02-outlined" padding="s">
+                      <gds-flex flex-direction="column" gap="2xs">
+                        <gds-text font="detail-s-book">Booked Amount</gds-text>
+                        <gds-formatted-number
+                          .value=${Number(row.amount)}
+                        ></gds-formatted-number>
+                      </gds-flex>
+                    </gds-card>
+
+                    <gds-card variant="neutral-02-outlined" padding="s">
+                      <gds-flex flex-direction="column" gap="2xs">
+                        <gds-text font="detail-s-book">Available</gds-text>
+                        <gds-formatted-number
+                          .value=${Number(row.available)}
+                        ></gds-formatted-number>
+                      </gds-flex>
+                    </gds-card>
+
+                    <gds-card variant="neutral-02-outlined" padding="s">
+                      <gds-flex flex-direction="column" gap="2xs">
+                        <gds-text font="detail-s-book">Owner</gds-text>
+                        <gds-text font="detail-s-bold"
+                          >${String(row.owner)}</gds-text
+                        >
+                      </gds-flex>
+                    </gds-card>
+                  </gds-grid>
+
+                  <gds-flex gap="s" flex-wrap="wrap">
+                    <gds-button size="small">Top up account</gds-button>
+                    <gds-button rank="secondary" size="small">
+                      Set alert rule
+                    </gds-button>
+                    <gds-button rank="tertiary" size="small">
+                      View settlement queue
+                    </gds-button>
+                  </gds-flex>
+                </gds-flex>
+              </gds-card>
+            ` : row.expansionMode === "full" && row.id === 202 ? html`
+                <gds-card
+                  slot="expand:${row.id}:full"
+                  variant="neutral-02-outlined"
+                >
+                  <gds-flex flex-direction="column" gap="m" padding="m">
+                    <gds-flex
+                      justify-content="space-between"
+                      align-items="center"
+                      flex-wrap="wrap"
+                      gap="s"
+                    >
+                      <gds-flex flex-direction="column" gap="2xs">
+                        <gds-text font="heading-xs">
+                          Liquidity Reserve Overview
+                        </gds-text>
+                        <gds-text font="detail-s-book">
+                          ${String(row.account)} acts as the primary treasury
+                          reserve used for short-term liquidity balancing.
+                        </gds-text>
+                      </gds-flex>
+                      <gds-badge variant="information" size="small">
+                        Treasury account
+                      </gds-badge>
+                    </gds-flex>
+
+                    <gds-grid columns="s{1}; m{2}; l{4}" gap="s">
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">
+                            Booked Amount
+                          </gds-text>
+                          <gds-formatted-number
+                            .value=${Number(row.amount)}
+                          ></gds-formatted-number>
+                        </gds-flex>
+                      </gds-card>
+
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">Available</gds-text>
+                          <gds-formatted-number
+                            .value=${Number(row.available)}
+                          ></gds-formatted-number>
+                        </gds-flex>
+                      </gds-card>
+
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">Owner</gds-text>
+                          <gds-text font="detail-s-bold">
+                            ${String(row.owner)}
+                          </gds-text>
+                        </gds-flex>
+                      </gds-card>
+
+                      <gds-card variant="neutral-02-outlined" padding="s">
+                        <gds-flex flex-direction="column" gap="2xs">
+                          <gds-text font="detail-s-book">Updated</gds-text>
+                          <gds-text font="detail-s-bold">
+                            ${String(row.lastUpdated)}
+                          </gds-text>
+                        </gds-flex>
+                      </gds-card>
+                    </gds-grid>
+
+                    <gds-flex gap="s" flex-wrap="wrap">
+                      <gds-button size="small">View cash forecast</gds-button>
+                      <gds-button rank="secondary" size="small">
+                        Transfer funds
+                      </gds-button>
+                      <gds-button rank="tertiary" size="small">
+                        Download reserve report
+                      </gds-button>
+                    </gds-flex>
+                  </gds-flex>
+                </gds-card>
+              ` : row.expansionMode === "full" && row.id === 209 ? html`
+                  <gds-flex
+                    slot="expand:${row.id}:full"
+                    gap="s"
+                    align-items="center"
+                    padding="m"
+                  >
+                    <gds-badge size="small" variant="warning"
+                      >Monitoring</gds-badge
+                    >
+                    <gds-text font="detail-s-book">
+                      Available balance on ${String(row.account)} is below
+                      internal threshold for ${String(row.segment)}.
+                    </gds-text>
+                  </gds-flex>
+                ` : null}
+      `
+  )}
+  `,
+  TfootSlotContent: (rows) => {
+    const pageBooked = rows.reduce(
+      (sum, row) => sum + (Number(row.amount) || 0),
+      0
+    );
+    const pageAvailable = rows.reduce(
+      (sum, row) => sum + (Number(row.available) || 0),
+      0
+    );
+    const riskCount = rows.filter((row) => String(row.status) === "Risk").length;
+    return html`
+      <span slot="tfoot:account">${rows.length} accounts</span>
+      <gds-badge
+        slot="tfoot:status"
+        size="small"
+        variant="${riskCount > 0 ? "negative" : "positive"}"
+      >
+        ${riskCount > 0 ? `${riskCount} at risk` : "No risk"}
+      </gds-badge>
+      <gds-flex slot="tfoot:amount" gap="s" align-items="center">
+        <gds-formatted-number .value=${pageBooked}></gds-formatted-number>
+        <gds-badge size="small">SEK</gds-badge>
+      </gds-flex>
+      <gds-flex slot="tfoot:available" gap="s" align-items="center">
+        <gds-formatted-number .value=${pageAvailable}></gds-formatted-number>
+        <gds-badge size="small">SEK</gds-badge>
+      </gds-flex>
+    `;
+  }
+};
 export {
   Actions,
+  ExpandableFinance,
   Feedback,
   Users
 };