npm - @solidxai/core-ui - Versions diffs - 0.1.8-beta.8 → 0.1.8-beta.9 - Mend

@solidxai/core-ui 0.1.8-beta.8 → 0.1.8-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/components/core/list/SolidListView.tsx CHANGED Viewed

@@ -37,6 +37,7 @@ import { SolidListViewRowActionsMenu } from "./SolidListViewRowActionsMenu";
 import { SolidHeaderRequestStatus } from "../../common/SolidHeaderRequestStatus";
 import {
   SolidButton,
+  SolidConfirmDialog,
   SolidDialog,
   SolidDialogBody,
   SolidDialogClose,
@@ -1714,32 +1715,21 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
           )}
         </div>
       </div>
-      <SolidDialog
+      <SolidConfirmDialog
         open={isDialogVisible}
-        onOpenChange={(open) => {
-          if (!open) {
-            onDeleteClose();
-          }
-        }}
+        onCancel={onDeleteClose}
+        onConfirm={deleteBulk}
         className="solid-shadcn-confirm-dialog solid-delete-confirm-dialog"
-      >
-        <SolidDialogHeader className="solid-shadcn-dialog-head">
-          <SolidDialogTitle>Confirm Delete</SolidDialogTitle>
-          <SolidDialogClose />
-        </SolidDialogHeader>
-        <SolidDialogSeparator className="solid-shadcn-dialog-sep" />
-        <SolidDialogBody className="solid-shadcn-dialog-body">
-          <p className="solid-shadcn-dialog-text">Are you sure you want to delete the selected records?</p>
-        </SolidDialogBody>
-        <SolidDialogFooter className="solid-shadcn-dialog-actions">
-          <SolidButton variant="destructive" size="sm" autoFocus onClick={deleteBulk}>
-            Delete
-          </SolidButton>
-          <SolidButton variant="outline" size="sm" onClick={onDeleteClose}>
-            Cancel
-          </SolidButton>
-        </SolidDialogFooter>
-      </SolidDialog>
+        headerClassName="solid-shadcn-dialog-head"
+        bodyClassName="solid-shadcn-dialog-body"
+        footerClassName="solid-shadcn-dialog-actions"
+        separatorClassName="solid-shadcn-dialog-sep"
+        showSeparator
+        title="Delete Records"
+        message={<p className="solid-shadcn-dialog-text">Are you sure you want to delete the selected records?</p>}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+      />
       <SolidDialog
         open={isRecoverDialogVisible}
         onOpenChange={(open) => {
@@ -1790,32 +1780,21 @@ export const SolidListView = forwardRef<SolidListViewHandle, SolidListViewParams
           </SolidDialog>
         )
       }
-      <SolidDialog
+      <SolidConfirmDialog
         open={deleteEntity}
-        onOpenChange={(open) => {
-          if (!open) {
-            setDeleteEntity(false);
-          }
-        }}
+        onCancel={() => setDeleteEntity(false)}
+        onConfirm={handleDeleteEntity}
         className="solid-shadcn-confirm-dialog solid-delete-confirm-dialog"
-      >
-        <SolidDialogHeader className="solid-shadcn-dialog-head">
-          <SolidDialogTitle>{`Delete ${entityDisplayName}`}</SolidDialogTitle>
-          <SolidDialogClose />
-        </SolidDialogHeader>
-        <SolidDialogSeparator className="solid-shadcn-dialog-sep" />
-        <SolidDialogBody className="solid-shadcn-dialog-body">
-          <p className="solid-shadcn-dialog-text">{`Are you sure you want to delete this ${entityDisplayName}?`}</p>
-        </SolidDialogBody>
-        <SolidDialogFooter className="solid-shadcn-dialog-actions">
-          <SolidButton variant="destructive" size="sm" onClick={handleDeleteEntity}>
-            Delete
-          </SolidButton>
-          <SolidButton variant="outline" size="sm" onClick={() => setDeleteEntity(false)}>
-            Cancel
-          </SolidButton>
-        </SolidDialogFooter>
-      </SolidDialog>
+        headerClassName="solid-shadcn-dialog-head"
+        bodyClassName="solid-shadcn-dialog-body"
+        footerClassName="solid-shadcn-dialog-actions"
+        separatorClassName="solid-shadcn-dialog-sep"
+        showSeparator
+        title={`Delete ${entityDisplayName}`}
+        message={<p className="solid-shadcn-dialog-text">{`Are you sure you want to delete this ${entityDisplayName}?`}</p>}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+      />
       {openLightbox && (
         <SolidLightbox
           open={openLightbox}

package/dist/components/core/users/ApiKeysTab/ApiKeysTab.css CHANGED Viewed

@@ -1,38 +1,312 @@
 .solid-api-keys-tab {
-  padding: 4px 0;
+  padding: 0;
+  width: 100%;
+}
+.solid-api-keys-hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+.solid-api-keys-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.solid-api-keys-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--foreground);
+}
+.solid-api-keys-subtitle {
+  max-width: 700px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+}
+.solid-api-keys-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.solid-api-keys-count {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+  background: color-mix(in srgb, var(--accent) 30%, transparent);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted-foreground);
+}
+.solid-api-keys-state {
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+}
+.solid-api-keys-error {
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  gap: 6px;
+  color: var(--muted-foreground);
+  font-size: 13px;
+}
+.solid-api-keys-empty {
+  width: 100%;
+  min-height: 320px;
+  border: 1px dashed color-mix(in srgb, var(--border) 86%, transparent);
+  border-radius: 16px;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, transparent), transparent);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 28px;
+}
+.solid-api-keys-empty-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--primary) 10%, var(--card));
+  color: color-mix(in srgb, var(--foreground) 72%, transparent);
+}
+.solid-api-keys-empty-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--foreground);
+}
+.solid-api-keys-empty-copy {
+  max-width: 360px;
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+}
+.solid-api-keys-table-shell {
+  width: 100%;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--card) 98%, white 2%);
+  overflow: hidden;
+}
+.solid-api-keys-table-wrap {
+  overflow-x: auto;
+}
+.solid-api-keys-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
 }
 .solid-api-keys-th {
-  padding: 8px 12px;
+  padding: 13px 16px;
   text-align: left;
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-color-secondary, #6b7280);
+  color: var(--muted-foreground);
   letter-spacing: 0.02em;
-  border-bottom: 1px solid var(--surface-border, #dfe7ef);
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  background: color-mix(in srgb, var(--accent) 32%, transparent);
   white-space: nowrap;
 }
+.solid-api-keys-th--right {
+  text-align: right;
+}
 .solid-api-keys-td {
-  padding: 12px 12px;
+  padding: 16px;
   font-size: 13px;
-  color: var(--text-color, #4b5563);
-  border-bottom: 1px solid var(--surface-border, #dfe7ef);
+  color: var(--foreground);
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
   vertical-align: middle;
 }
+.solid-api-keys-td--right {
+  text-align: right;
+}
+.solid-api-keys-name {
+  font-weight: 600;
+  color: var(--foreground);
+}
+.solid-api-keys-code {
+  display: inline-flex;
+  max-width: 100%;
+  font-family: monospace;
+  font-size: 12.5px;
+  background: color-mix(in srgb, var(--accent) 34%, transparent);
+  padding: 4px 8px;
+  border-radius: 999px;
+  color: color-mix(in srgb, var(--foreground) 90%, transparent);
+  overflow-wrap: anywhere;
+}
+.solid-api-keys-muted {
+  color: var(--muted-foreground);
+}
+.solid-api-keys-date--expired {
+  color: var(--destructive);
+}
+.solid-api-keys-date--warning {
+  color: #b7791f;
+}
 .solid-api-keys-row--expired td {
   opacity: 0.6;
 }
 .solid-api-keys-row--expired:hover td {
-  background: var(--surface-hover, #f6f9fc);
+  background: color-mix(in srgb, var(--accent) 42%, transparent);
 }
 tbody tr:hover .solid-api-keys-td {
-  background: var(--surface-hover, #f6f9fc);
+  background: color-mix(in srgb, var(--accent) 42%, transparent);
 }
 tbody tr:last-child .solid-api-keys-td {
   border-bottom: none;
 }
+.solid-api-key-dialog-header {
+  padding-bottom: 14px;
+}
+.solid-api-key-dialog-body {
+  padding-top: 18px;
+}
+.solid-api-key-dialog-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.solid-api-key-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.solid-api-key-dialog-hint {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--muted-foreground);
+}
+.solid-api-key-dialog-footer {
+  padding-top: 14px;
+}
+.solid-api-key-reveal-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  margin-bottom: 18px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border));
+  background: color-mix(in srgb, #f59e0b 10%, transparent);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--foreground);
+}
+.solid-api-key-reveal-warning-icon {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+.solid-api-key-reveal-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+  background: color-mix(in srgb, var(--accent) 28%, transparent);
+}
+.solid-api-key-reveal-code {
+  flex: 1 1 auto;
+  margin: 0;
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--foreground);
+  word-break: break-all;
+  user-select: all;
+}
+.solid-api-key-reveal-copy {
+  width: 34px;
+  height: 34px;
+  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+  border-radius: 10px;
+  background: var(--card);
+  color: var(--muted-foreground);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+.solid-api-key-reveal-copy:hover {
+  background: var(--accent);
+  color: var(--foreground);
+}
+.solid-api-key-reveal-copy-success,
+.solid-api-key-reveal-copied {
+  color: #16a34a;
+}
+.solid-api-key-reveal-copied {
+  font-size: 12px;
+}
+@media (max-width: 900px) {
+  .solid-api-keys-hero {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .solid-api-keys-actions {
+    justify-content: space-between;
+  }
+}
+@media (max-width: 640px) {
+  .solid-api-keys-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

package/dist/components/core/users/ApiKeysTab/ApiKeysTab.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ApiKeysTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/ApiKeysTab.tsx"],"names":[],"mappings":"AAGA,OAAO,kBAAkB,CAAC;~~AA4J1B~~,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,SAAiB,EAAE,EAAE,eAAe,~~2CA2FxE~~"}
1	+ {"version":3,"file":"ApiKeysTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/ApiKeysTab.tsx"],"names":[],"mappings":"AAGA,OAAO,kBAAkB,CAAC;AAmJ1B,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,SAAiB,EAAE,EAAE,eAAe,2CAsGxE"}

package/dist/components/core/users/ApiKeysTab/ApiKeysTab.js CHANGED Viewed

@@ -34,8 +34,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 import { KeyRound, Plus } from "lucide-react";
 import "./ApiKeysTab.css";
@@ -64,39 +73,35 @@ function getExpiryStatus(expiresAt) {
     return "ok";
 }
 function ApiKeysTable(_a) {
-    var keys = _a.keys, onToggleActive = _a.onToggleActive, isTogglingId = _a.isTogglingId;
+    var keys = _a.keys, onToggleActive = _a.onToggleActive, isTogglingId = _a.isTogglingId, onGenerateFirstKey = _a.onGenerateFirstKey, canCreate = _a.canCreate;
     if (keys.length === 0) {
-        return (_jsxs("div", { className: "flex flex-column align-items-center justify-content-center gap-3 py-6", style: { color: "var(--solid-text-secondary, #888)" }, children: [_jsx(KeyRound, { size: 32, strokeWidth: 1.5 }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "m-0", style: { fontSize: 14, fontWeight: 500 }, children: "No API keys" }), _jsx("p", { className: "m-0 mt-1", style: { fontSize: 12 }, children: "Generate a key to enable programmatic access." })] })] }));
+        return (_jsxs("div", { className: "solid-api-keys-empty", children: [_jsx("div", { className: "solid-api-keys-empty-icon", children: _jsx(KeyRound, { size: 30, strokeWidth: 1.6 }) }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "solid-api-keys-empty-title m-0", children: "No API keys yet" }), _jsx("p", { className: "solid-api-keys-empty-copy m-0", children: canCreate
+                                ? "Generate a key to enable secure programmatic access for this user."
+                                : "API key generation is disabled for this user account." })] }), canCreate ? (_jsxs(SolidButton, { type: "button", onClick: onGenerateFirstKey, children: [_jsx(Plus, { size: 14 }), "Generate First Key"] })) : null] }));
     }
-    return (_jsx("div", { style: { overflowX: "auto" }, children: _jsxs("table", { style: { width: "100%", borderCollapse: "collapse", tableLayout: "fixed" }, children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "18%" } }), _jsx("col", { style: { width: "22%" } }), _jsx("col", { style: { width: "14%" } }), _jsx("col", { style: { width: "16%" } }), _jsx("col", { style: { width: "18%" } }), _jsx("col", { style: { width: "12%" } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "solid-api-keys-th", children: "Name" }), _jsx("th", { className: "solid-api-keys-th", children: "Key" }), _jsx("th", { className: "solid-api-keys-th", children: "Status" }), _jsx("th", { className: "solid-api-keys-th", children: "Expires" }), _jsx("th", { className: "solid-api-keys-th", children: "Last Used" }), _jsx("th", { className: "solid-api-keys-th", style: { textAlign: "right" }, children: "Active" })] }) }), _jsx("tbody", { children: keys.map(function (key) {
-                        var expiryStatus = getExpiryStatus(key.expiresAt);
-                        var isExpired = expiryStatus === "expired";
-                        return (_jsxs("tr", { className: isExpired ? "solid-api-keys-row--expired" : undefined, children: [_jsx("td", { className: "solid-api-keys-td", children: _jsx("span", { style: { fontWeight: 500 }, children: key.name }) }), _jsx("td", { className: "solid-api-keys-td", children: _jsx("code", { style: {
-                                            fontFamily: "monospace",
-                                            fontSize: 13,
-                                            background: "var(--solid-surface-secondary, #f5f5f5)",
-                                            padding: "2px 6px",
-                                            borderRadius: 4,
-                                        }, children: key.maskedKey }) }), _jsx("td", { className: "solid-api-keys-td", children: isExpired ? (_jsx(SolidTag, { tone: "danger", children: "Expired" })) : !key.isActive ? (_jsx(SolidTag, { tone: "warn", children: "Inactive" })) : expiryStatus === "expiring-soon" ? (_jsx(SolidTag, { tone: "warn", children: "Expiring soon" })) : (_jsx(SolidTag, { tone: "success", children: "Active" })) }), _jsx("td", { className: "solid-api-keys-td", style: {
-                                        color: expiryStatus === "expired"
-                                            ? "var(--solid-danger-color, #ef4444)"
-                                            : expiryStatus === "expiring-soon"
-                                                ? "var(--solid-warn-color, #f59e0b)"
-                                                : undefined,
-                                    }, children: expiryStatus === "never" ? (_jsx("span", { style: { color: "var(--solid-text-secondary, #888)" }, children: "Never" })) : (formatDate(key.expiresAt)) }), _jsx("td", { className: "solid-api-keys-td", style: { color: "var(--solid-text-secondary, #888)" }, children: formatDate(key.lastUsedAt) }), _jsx("td", { className: "solid-api-keys-td", style: { textAlign: "right" }, children: isTogglingId === key.id ? (_jsx(SolidSpinner, {})) : (_jsx(SolidSwitch, { checked: key.isActive, disabled: isExpired, onChange: function () { return onToggleActive(key); } })) })] }, key.id));
-                    }) })] }) }));
+    return (_jsx("div", { className: "solid-api-keys-table-shell", children: _jsx("div", { className: "solid-api-keys-table-wrap", children: _jsxs("table", { className: "solid-api-keys-table", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "18%" } }), _jsx("col", { style: { width: "22%" } }), _jsx("col", { style: { width: "14%" } }), _jsx("col", { style: { width: "16%" } }), _jsx("col", { style: { width: "18%" } }), _jsx("col", { style: { width: "12%" } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "solid-api-keys-th", children: "Name" }), _jsx("th", { className: "solid-api-keys-th", children: "Key" }), _jsx("th", { className: "solid-api-keys-th", children: "Status" }), _jsx("th", { className: "solid-api-keys-th", children: "Expires" }), _jsx("th", { className: "solid-api-keys-th", children: "Last Used" }), _jsx("th", { className: "solid-api-keys-th solid-api-keys-th--right", children: "Active" })] }) }), _jsx("tbody", { children: keys.map(function (key) {
+                            var expiryStatus = getExpiryStatus(key.expiresAt);
+                            var isExpired = expiryStatus === "expired";
+                            return (_jsxs("tr", { className: isExpired ? "solid-api-keys-row--expired" : undefined, children: [_jsx("td", { className: "solid-api-keys-td", children: _jsx("span", { className: "solid-api-keys-name", children: key.name }) }), _jsx("td", { className: "solid-api-keys-td", children: _jsx("code", { className: "solid-api-keys-code", children: key.maskedKey }) }), _jsx("td", { className: "solid-api-keys-td", children: isExpired ? (_jsx(SolidTag, { tone: "danger", children: "Expired" })) : !key.isActive ? (_jsx(SolidTag, { tone: "warn", children: "Inactive" })) : expiryStatus === "expiring-soon" ? (_jsx(SolidTag, { tone: "warn", children: "Expiring soon" })) : (_jsx(SolidTag, { tone: "success", children: "Active" })) }), _jsx("td", { className: "solid-api-keys-td ".concat(expiryStatus === "expired" ? "solid-api-keys-date--expired" : "", " ").concat(expiryStatus === "expiring-soon" ? "solid-api-keys-date--warning" : ""), children: expiryStatus === "never" ? (_jsx("span", { className: "solid-api-keys-muted", children: "Never" })) : (formatDate(key.expiresAt)) }), _jsx("td", { className: "solid-api-keys-td solid-api-keys-muted", children: formatDate(key.lastUsedAt) }), _jsx("td", { className: "solid-api-keys-td solid-api-keys-td--right", children: isTogglingId === key.id ? (_jsx(SolidSpinner, {})) : (_jsx(SolidSwitch, { checked: key.isActive, disabled: isExpired, onChange: function () { return onToggleActive(key); } })) })] }, key.id));
+                        }) })] }) }) }));
 }
 export function ApiKeysTab(_a) {
     var _this = this;
-    var _b, _c;
-    var userId = _a.userId, _d = _a.canCreate, canCreate = _d === void 0 ? false : _d;
+    var _b;
+    var userId = _a.userId, _c = _a.canCreate, canCreate = _c === void 0 ? false : _c;
     var dispatch = useDispatch();
-    var _e = useGetUserApiKeysQuery(userId), data = _e.data, isLoading = _e.isLoading, isError = _e.isError;
+    var _d = useGetUserApiKeysQuery(userId), data = _d.data, isLoading = _d.isLoading, isError = _d.isError, refetch = _d.refetch;
     var updateApiKey = useUpdateApiKeyMutation()[0];
-    var _f = useState(null), togglingId = _f[0], setTogglingId = _f[1];
-    var _g = useState(false), showGenerate = _g[0], setShowGenerate = _g[1];
-    var _h = useState(null), revealKey = _h[0], setRevealKey = _h[1];
-    var keys = (_c = (_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.apiKeys) !== null && _c !== void 0 ? _c : [];
+    var _e = useState(null), togglingId = _e[0], setTogglingId = _e[1];
+    var _f = useState(false), showGenerate = _f[0], setShowGenerate = _f[1];
+    var _g = useState(null), revealKey = _g[0], setRevealKey = _g[1];
+    var _h = useState([]), optimisticKeys = _h[0], setOptimisticKeys = _h[1];
+    var keys = useMemo(function () {
+        var _a, _b;
+        var serverKeys = (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.apiKeys) !== null && _b !== void 0 ? _b : [];
+        var merged = __spreadArray(__spreadArray([], optimisticKeys.filter(function (key) { return !serverKeys.some(function (serverKey) { return serverKey.id === key.id; }); }), true), serverKeys, true);
+        return merged.sort(function (a, b) { return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(); });
+    }, [(_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.apiKeys, optimisticKeys]);
     var handleToggle = function (key) { return __awaiter(_this, void 0, void 0, function () {
         var err_1;
         var _a;
@@ -131,8 +136,10 @@ export function ApiKeysTab(_a) {
             }
         });
     }); };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "solid-api-keys-tab", children: [_jsxs("div", { className: "flex align-items-center justify-content-between mb-4", children: [_jsxs("div", { children: [_jsx("p", { className: "m-0", style: { fontWeight: 600, fontSize: 14 }, children: "API Keys" }), _jsx("p", { className: "m-0 mt-1", style: { fontSize: 12, color: "var(--solid-text-secondary, #888)" }, children: "Keys grant programmatic access. Store them securely \u2014 they are shown only once." })] }), canCreate && (_jsxs(SolidButton, { size: "small", type: "button", onClick: function () { return setShowGenerate(true); }, children: [_jsx(Plus, { size: 14 }), "Generate Key"] }))] }), isLoading ? (_jsx("div", { className: "flex justify-content-center py-5", children: _jsx(SolidSpinner, {}) })) : isError && keys.length === 0 ? (_jsxs("div", { className: "flex flex-column align-items-center justify-content-center gap-2 py-5", style: { color: "var(--solid-text-secondary, #888)", fontSize: 13 }, children: [_jsx("p", { className: "m-0", children: "Something went wrong while loading API keys." }), _jsx("p", { className: "m-0", children: "Please refresh the page and try again." })] })) : (_jsx(ApiKeysTable, { keys: keys, onToggleActive: handleToggle, isTogglingId: togglingId }))] }), _jsx(GenerateApiKeyModal, { open: showGenerate, userId: Number(userId), onClose: function () { return setShowGenerate(false); }, onCreated: function (apiKey, keyName) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "solid-api-keys-tab", children: [_jsxs("div", { className: "solid-api-keys-hero", children: [_jsxs("div", { className: "solid-api-keys-copy", children: [_jsx("p", { className: "solid-api-keys-title m-0", children: "API Keys" }), _jsx("p", { className: "solid-api-keys-subtitle m-0", children: "Keys grant programmatic access. Store them securely \u2014 they are shown only once." })] }), _jsxs("div", { className: "solid-api-keys-actions", children: [_jsxs("span", { className: "solid-api-keys-count", children: [keys.length, " key", keys.length === 1 ? "" : "s"] }), canCreate ? (_jsxs(SolidButton, { size: "small", type: "button", onClick: function () { return setShowGenerate(true); }, children: [_jsx(Plus, { size: 14 }), "Generate Key"] })) : null] })] }), isLoading ? (_jsx("div", { className: "solid-api-keys-state", children: _jsx(SolidSpinner, {}) })) : isError && keys.length === 0 ? (_jsxs("div", { className: "solid-api-keys-error", children: [_jsx("p", { className: "m-0", children: "Something went wrong while loading API keys." }), _jsx("p", { className: "m-0", children: "Please refresh the page and try again." })] })) : (_jsx(ApiKeysTable, { keys: keys, onToggleActive: handleToggle, isTogglingId: togglingId, onGenerateFirstKey: function () { return setShowGenerate(true); }, canCreate: canCreate }))] }), _jsx(GenerateApiKeyModal, { open: showGenerate, userId: Number(userId), onClose: function () { return setShowGenerate(false); }, onCreated: function (apiKey, keyName, record) {
                     setShowGenerate(false);
+                    setOptimisticKeys(function (previous) { return __spreadArray([record], previous.filter(function (existing) { return existing.id !== record.id; }), true); });
+                    void refetch();
                     setRevealKey({ apiKey: apiKey, keyName: keyName });
                 } }), revealKey && (_jsx(RevealApiKeyModal, { open: true, apiKey: revealKey.apiKey, keyName: revealKey.keyName, onClose: function () { return setRevealKey(null); } }))] }));
 }

package/dist/components/core/users/ApiKeysTab/ApiKeysTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ApiKeysTab.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/ApiKeysTab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { KeyRound, Plus } from \"lucide-react\";\nimport \"./ApiKeysTab.css\";\nimport { SolidButton, SolidSpinner, SolidSwitch, SolidTag } from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport {\n useGetUserApiKeysQuery,\n useUpdateApiKeyMutation,\n type ApiKeyRecord,\n} from \"../../../../redux/api/apiKeyApi\";\nimport { GenerateApiKeyModal } from \"./GenerateApiKeyModal\";\nimport { RevealApiKeyModal } from \"./RevealApiKeyModal\";\n\nfunction formatDate(iso: string \| null): string {\n if (!iso) return \"—\";\n return new Date(iso).toLocaleDateString(undefined, {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nfunction getExpiryStatus(expiresAt: string \| null): \"expired\" \| \"expiring-soon\" \| \"ok\" \| \"never\" {\n if (!expiresAt) return \"never\";\n const diff = new Date(expiresAt).getTime() - Date.now();\n if (diff < 0) return \"expired\";\n if (diff < 7 * 24 * 60 * 60 * 1000) return \"expiring-soon\";\n return \"ok\";\n}\n\nfunction ApiKeysTable({\n keys,\n onToggleActive,\n isTogglingId,\n}: {\n keys: ApiKeyRecord[];\n onToggleActive: (key: ApiKeyRecord) => void;\n isTogglingId: string \| null;\n}) {\n if (keys.length === 0) {\n return (\n <div\n className=\"flex flex-column align-items-center justify-content-center gap-3 py-6\"\n style={{ color: \"var(--solid-text-secondary, #888)\" }}\n >\n <KeyRound size={32} strokeWidth={1.5} />\n <div className=\"text-center\">\n <p className=\"m-0\" style={{ fontSize: 14, fontWeight: 500 }}>\n No API keys\n </p>\n <p className=\"m-0 mt-1\" style={{ fontSize: 12 }}>\n Generate a key to enable programmatic access.\n </p>\n </div>\n </div>\n );\n }\n\n return (\n <div style={{ overflowX: \"auto\" }}>\n <table style={{ width: \"100%\", borderCollapse: \"collapse\", tableLayout: \"fixed\" }}>\n <colgroup>\n <col style={{ width: \"18%\" }} />\n <col style={{ width: \"22%\" }} />\n <col style={{ width: \"14%\" }} />\n <col style={{ width: \"16%\" }} />\n <col style={{ width: \"18%\" }} />\n <col style={{ width: \"12%\" }} />\n </colgroup>\n <thead>\n <tr>\n <th className=\"solid-api-keys-th\">Name</th>\n <th className=\"solid-api-keys-th\">Key</th>\n <th className=\"solid-api-keys-th\">Status</th>\n <th className=\"solid-api-keys-th\">Expires</th>\n <th className=\"solid-api-keys-th\">Last Used</th>\n <th className=\"solid-api-keys-th\" style={{ textAlign: \"right\" }}>Active</th>\n </tr>\n </thead>\n <tbody>\n {keys.map((key) => {\n const expiryStatus = getExpiryStatus(key.expiresAt);\n const isExpired = expiryStatus === \"expired\";\n\n return (\n <tr key={key.id} className={isExpired ? \"solid-api-keys-row--expired\" : undefined}>\n <td className=\"solid-api-keys-td\">\n <span style={{ fontWeight: 500 }}>{key.name}</span>\n </td>\n\n <td className=\"solid-api-keys-td\">\n <code\n style={{\n fontFamily: \"monospace\",\n fontSize: 13,\n background: \"var(--solid-surface-secondary, #f5f5f5)\",\n padding: \"2px 6px\",\n borderRadius: 4,\n }}\n >\n {key.maskedKey}\n </code>\n </td>\n\n <td className=\"solid-api-keys-td\">\n {isExpired ? (\n <SolidTag tone=\"danger\">Expired</SolidTag>\n ) : !key.isActive ? (\n <SolidTag tone=\"warn\">Inactive</SolidTag>\n ) : expiryStatus === \"expiring-soon\" ? (\n <SolidTag tone=\"warn\">Expiring soon</SolidTag>\n ) : (\n <SolidTag tone=\"success\">Active</SolidTag>\n )}\n </td>\n\n <td\n className=\"solid-api-keys-td\"\n style={{\n color:\n expiryStatus === \"expired\"\n ? \"var(--solid-danger-color, #ef4444)\"\n : expiryStatus === \"expiring-soon\"\n ? \"var(--solid-warn-color, #f59e0b)\"\n : undefined,\n }}\n >\n {expiryStatus === \"never\" ? (\n <span style={{ color: \"var(--solid-text-secondary, #888)\" }}>Never</span>\n ) : (\n formatDate(key.expiresAt)\n )}\n </td>\n\n <td className=\"solid-api-keys-td\" style={{ color: \"var(--solid-text-secondary, #888)\" }}>\n {formatDate(key.lastUsedAt)}\n </td>\n\n <td className=\"solid-api-keys-td\" style={{ textAlign: \"right\" }}>\n {isTogglingId === key.id ? (\n <SolidSpinner />\n ) : (\n <SolidSwitch\n checked={key.isActive}\n disabled={isExpired}\n onChange={() => onToggleActive(key)}\n />\n )}\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n );\n}\n\ninterface ApiKeysTabProps {\n userId: string;\n canCreate?: boolean;\n}\n\nexport function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {\n const dispatch = useDispatch();\n const { data, isLoading, isError } = useGetUserApiKeysQuery(userId);\n const [updateApiKey] = useUpdateApiKeyMutation();\n const [togglingId, setTogglingId] = useState<string \| null>(null);\n const [showGenerate, setShowGenerate] = useState(false);\n const [revealKey, setRevealKey] = useState<{ apiKey: string; keyName: string } \| null>(null);\n\n const keys: ApiKeyRecord[] = data?.data?.apiKeys ?? [];\n\n const handleToggle = async (key: ApiKeyRecord) => {\n setTogglingId(key.id);\n try {\n await updateApiKey({ id: key.id, isActive: !key.isActive }).unwrap();\n dispatch(\n showToast({\n severity: \"success\",\n summary: \"Updated\",\n detail: `API key \"${key.name}\" ${!key.isActive ? \"activated\" : \"deactivated\"}.`,\n })\n );\n } catch (err: any) {\n dispatch(\n showToast({\n severity: \"error\",\n summary: \"Error\",\n detail: err?.data?.message \|\| \"Failed to update API key.\",\n })\n );\n } finally {\n setTogglingId(null);\n }\n };\n\n return (\n <>\n <div className=\"solid-api-keys-tab\">\n <div className=\"flex align-items-center justify-content-between mb-4\">\n <div>\n <p className=\"m-0\" style={{ fontWeight: 600, fontSize: 14 }}>\n API Keys\n </p>\n <p className=\"m-0 mt-1\" style={{ fontSize: 12, color: \"var(--solid-text-secondary, #888)\" }}>\n Keys grant programmatic access. Store them securely — they are shown only once.\n </p>\n </div>\n {canCreate && (\n <SolidButton size=\"small\" type=\"button\" onClick={() => setShowGenerate(true)}>\n <Plus size={14} />\n Generate Key\n </SolidButton>\n )}\n </div>\n\n {isLoading ? (\n <div className=\"flex justify-content-center py-5\">\n <SolidSpinner />\n </div>\n ) : isError && keys.length === 0 ? (\n <div\n className=\"flex flex-column align-items-center justify-content-center gap-2 py-5\"\n style={{ color: \"var(--solid-text-secondary, #888)\", fontSize: 13 }}\n >\n <p className=\"m-0\">Something went wrong while loading API keys.</p>\n <p className=\"m-0\">Please refresh the page and try again.</p>\n </div>\n ) : (\n <ApiKeysTable keys={keys} onToggleActive={handleToggle} isTogglingId={togglingId} />\n )}\n </div>\n\n <GenerateApiKeyModal\n open={showGenerate}\n userId={Number(userId)}\n onClose={() => setShowGenerate(false)}\n onCreated={(apiKey, keyName) => {\n setShowGenerate(false);\n setRevealKey({ apiKey, keyName });\n }}\n />\n\n {revealKey && (\n <RevealApiKeyModal\n open={true}\n apiKey={revealKey.apiKey}\n keyName={revealKey.keyName}\n onClose={() => setRevealKey(null)}\n />\n )}\n </>\n );\n}\n"]}
1	+ {"version":3,"file":"ApiKeysTab.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/ApiKeysTab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { KeyRound, Plus } from \"lucide-react\";\nimport \"./ApiKeysTab.css\";\nimport { SolidButton, SolidSpinner, SolidSwitch, SolidTag } from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport {\n useGetUserApiKeysQuery,\n useUpdateApiKeyMutation,\n type ApiKeyRecord,\n} from \"../../../../redux/api/apiKeyApi\";\nimport { GenerateApiKeyModal } from \"./GenerateApiKeyModal\";\nimport { RevealApiKeyModal } from \"./RevealApiKeyModal\";\n\nfunction formatDate(iso: string \| null): string {\n if (!iso) return \"—\";\n return new Date(iso).toLocaleDateString(undefined, {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nfunction getExpiryStatus(expiresAt: string \| null): \"expired\" \| \"expiring-soon\" \| \"ok\" \| \"never\" {\n if (!expiresAt) return \"never\";\n const diff = new Date(expiresAt).getTime() - Date.now();\n if (diff < 0) return \"expired\";\n if (diff < 7 * 24 * 60 * 60 * 1000) return \"expiring-soon\";\n return \"ok\";\n}\n\nfunction ApiKeysTable({\n keys,\n onToggleActive,\n isTogglingId,\n onGenerateFirstKey,\n canCreate,\n}: {\n keys: ApiKeyRecord[];\n onToggleActive: (key: ApiKeyRecord) => void;\n isTogglingId: string \| null;\n onGenerateFirstKey: () => void;\n canCreate: boolean;\n}) {\n if (keys.length === 0) {\n return (\n <div className=\"solid-api-keys-empty\">\n <div className=\"solid-api-keys-empty-icon\">\n <KeyRound size={30} strokeWidth={1.6} />\n </div>\n <div className=\"text-center\">\n <p className=\"solid-api-keys-empty-title m-0\">No API keys yet</p>\n <p className=\"solid-api-keys-empty-copy m-0\">\n {canCreate\n ? \"Generate a key to enable secure programmatic access for this user.\"\n : \"API key generation is disabled for this user account.\"}\n </p>\n </div>\n {canCreate ? (\n <SolidButton type=\"button\" onClick={onGenerateFirstKey}>\n <Plus size={14} />\n Generate First Key\n </SolidButton>\n ) : null}\n </div>\n );\n }\n\n return (\n <div className=\"solid-api-keys-table-shell\">\n <div className=\"solid-api-keys-table-wrap\">\n <table className=\"solid-api-keys-table\">\n <colgroup>\n <col style={{ width: \"18%\" }} />\n <col style={{ width: \"22%\" }} />\n <col style={{ width: \"14%\" }} />\n <col style={{ width: \"16%\" }} />\n <col style={{ width: \"18%\" }} />\n <col style={{ width: \"12%\" }} />\n </colgroup>\n <thead>\n <tr>\n <th className=\"solid-api-keys-th\">Name</th>\n <th className=\"solid-api-keys-th\">Key</th>\n <th className=\"solid-api-keys-th\">Status</th>\n <th className=\"solid-api-keys-th\">Expires</th>\n <th className=\"solid-api-keys-th\">Last Used</th>\n <th className=\"solid-api-keys-th solid-api-keys-th--right\">Active</th>\n </tr>\n </thead>\n <tbody>\n {keys.map((key) => {\n const expiryStatus = getExpiryStatus(key.expiresAt);\n const isExpired = expiryStatus === \"expired\";\n\n return (\n <tr key={key.id} className={isExpired ? \"solid-api-keys-row--expired\" : undefined}>\n <td className=\"solid-api-keys-td\">\n <span className=\"solid-api-keys-name\">{key.name}</span>\n </td>\n\n <td className=\"solid-api-keys-td\">\n <code className=\"solid-api-keys-code\">{key.maskedKey}</code>\n </td>\n\n <td className=\"solid-api-keys-td\">\n {isExpired ? (\n <SolidTag tone=\"danger\">Expired</SolidTag>\n ) : !key.isActive ? (\n <SolidTag tone=\"warn\">Inactive</SolidTag>\n ) : expiryStatus === \"expiring-soon\" ? (\n <SolidTag tone=\"warn\">Expiring soon</SolidTag>\n ) : (\n <SolidTag tone=\"success\">Active</SolidTag>\n )}\n </td>\n\n <td className={`solid-api-keys-td ${expiryStatus === \"expired\" ? \"solid-api-keys-date--expired\" : \"\"} ${expiryStatus === \"expiring-soon\" ? \"solid-api-keys-date--warning\" : \"\"}`}>\n {expiryStatus === \"never\" ? (\n <span className=\"solid-api-keys-muted\">Never</span>\n ) : (\n formatDate(key.expiresAt)\n )}\n </td>\n\n <td className=\"solid-api-keys-td solid-api-keys-muted\">\n {formatDate(key.lastUsedAt)}\n </td>\n\n <td className=\"solid-api-keys-td solid-api-keys-td--right\">\n {isTogglingId === key.id ? (\n <SolidSpinner />\n ) : (\n <SolidSwitch\n checked={key.isActive}\n disabled={isExpired}\n onChange={() => onToggleActive(key)}\n />\n )}\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n </div>\n );\n}\n\ninterface ApiKeysTabProps {\n userId: string;\n canCreate?: boolean;\n}\n\nexport function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {\n const dispatch = useDispatch();\n const { data, isLoading, isError, refetch } = useGetUserApiKeysQuery(userId);\n const [updateApiKey] = useUpdateApiKeyMutation();\n const [togglingId, setTogglingId] = useState<string \| null>(null);\n const [showGenerate, setShowGenerate] = useState(false);\n const [revealKey, setRevealKey] = useState<{ apiKey: string; keyName: string } \| null>(null);\n const [optimisticKeys, setOptimisticKeys] = useState<ApiKeyRecord[]>([]);\n\n const keys = useMemo(() => {\n const serverKeys = data?.data?.apiKeys ?? [];\n const merged = [...optimisticKeys.filter((key) => !serverKeys.some((serverKey) => serverKey.id === key.id)), ...serverKeys];\n return merged.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());\n }, [data?.data?.apiKeys, optimisticKeys]);\n\n const handleToggle = async (key: ApiKeyRecord) => {\n setTogglingId(key.id);\n try {\n await updateApiKey({ id: key.id, isActive: !key.isActive }).unwrap();\n dispatch(\n showToast({\n severity: \"success\",\n summary: \"Updated\",\n detail: `API key \"${key.name}\" ${!key.isActive ? \"activated\" : \"deactivated\"}.`,\n })\n );\n } catch (err: any) {\n dispatch(\n showToast({\n severity: \"error\",\n summary: \"Error\",\n detail: err?.data?.message \|\| \"Failed to update API key.\",\n })\n );\n } finally {\n setTogglingId(null);\n }\n };\n\n return (\n <>\n <div className=\"solid-api-keys-tab\">\n <div className=\"solid-api-keys-hero\">\n <div className=\"solid-api-keys-copy\">\n <p className=\"solid-api-keys-title m-0\">API Keys</p>\n <p className=\"solid-api-keys-subtitle m-0\">\n Keys grant programmatic access. Store them securely — they are shown only once.\n </p>\n </div>\n <div className=\"solid-api-keys-actions\">\n <span className=\"solid-api-keys-count\">{keys.length} key{keys.length === 1 ? \"\" : \"s\"}</span>\n {canCreate ? (\n <SolidButton size=\"small\" type=\"button\" onClick={() => setShowGenerate(true)}>\n <Plus size={14} />\n Generate Key\n </SolidButton>\n ) : null}\n </div>\n </div>\n\n {isLoading ? (\n <div className=\"solid-api-keys-state\">\n <SolidSpinner />\n </div>\n ) : isError && keys.length === 0 ? (\n <div className=\"solid-api-keys-error\">\n <p className=\"m-0\">Something went wrong while loading API keys.</p>\n <p className=\"m-0\">Please refresh the page and try again.</p>\n </div>\n ) : (\n <ApiKeysTable\n keys={keys}\n onToggleActive={handleToggle}\n isTogglingId={togglingId}\n onGenerateFirstKey={() => setShowGenerate(true)}\n canCreate={canCreate}\n />\n )}\n </div>\n\n <GenerateApiKeyModal\n open={showGenerate}\n userId={Number(userId)}\n onClose={() => setShowGenerate(false)}\n onCreated={(apiKey, keyName, record) => {\n setShowGenerate(false);\n setOptimisticKeys((previous) => [record, ...previous.filter((existing) => existing.id !== record.id)]);\n void refetch();\n setRevealKey({ apiKey, keyName });\n }}\n />\n\n {revealKey && (\n <RevealApiKeyModal\n open={true}\n apiKey={revealKey.apiKey}\n keyName={revealKey.keyName}\n onClose={() => setRevealKey(null)}\n />\n )}\n </>\n );\n}\n"]}