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

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

@@ -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/list/SolidListViewRowButtonContextMenu.d.ts

@@ -1,2 +1,2 @@
-export declare const SolidListViewRowButtonContextMenu: ({ button, params, rowData, solidListViewMetaData, handleCustomButtonClick, onActionComplete }: any) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SolidListViewRowButtonContextMenu: ({ button, params, getSelectedSolidViewData, solidListViewMetaData, handleCustomButtonClick }: any) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=SolidListViewRowButtonContextMenu.d.ts.map

package/dist/components/core/list/SolidListViewRowButtonContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidListViewRowButtonContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListViewRowButtonContextMenu.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,iCAAiC,kGAAmG,GAAG,mDAmCnJ,CAAC"}
+{"version":3,"file":"SolidListViewRowButtonContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListViewRowButtonContextMenu.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iCAAiC,iGAAkG,GAAG,mDAmClJ,CAAC"}

package/dist/components/core/list/SolidListViewRowButtonContextMenu.js

@@ -9,21 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useSession } from "../../../hooks/useSession";
 import { hasAnyRole } from "../../../helpers/rolesHelper";
+import { Button } from "primereact/button";
 export var SolidListViewRowButtonContextMenu = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var button = _a.button, params = _a.params, rowData = _a.rowData, solidListViewMetaData = _a.solidListViewMetaData, handleCustomButtonClick = _a.handleCustomButtonClick, onActionComplete = _a.onActionComplete;
+    var button = _a.button, params = _a.params, getSelectedSolidViewData = _a.getSelectedSolidViewData, solidListViewMetaData = _a.solidListViewMetaData, handleCustomButtonClick = _a.handleCustomButtonClick;
+    var selectedSolidViewData = getSelectedSolidViewData === null || getSelectedSolidViewData === void 0 ? void 0 : getSelectedSolidViewData();
     var _j = useSession(), session = _j.data, status = _j.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
     var hasRole = !((_b = button === null || button === void 0 ? void 0 : button.attrs) === null || _b === void 0 ? void 0 : _b.roles) || ((_c = button === null || button === void 0 ? void 0 : button.attrs) === null || _c === void 0 ? void 0 : _c.roles.length) === 0 ? true : hasAnyRole(user === null || user === void 0 ? void 0 : user.roles, (_d = button === null || button === void 0 ? void 0 : button.attrs) === null || _d === void 0 ? void 0 : _d.roles);
     if (!hasRole)
         return null;
-    return (_jsxs("button", { type: "button", className: "solid-row-action-button ".concat(((_e = button === null || button === void 0 ? void 0 : button.attrs) === null || _e === void 0 ? void 0 : _e.className) ? (_f = button === null || button === void 0 ? void 0 : button.attrs) === null || _f === void 0 ? void 0 : _f.className : ''), onClick: function () {
+    return (_jsx(Button, { type: "button", icon: ((_e = button === null || button === void 0 ? void 0 : button.attrs) === null || _e === void 0 ? void 0 : _e.icon) ? (_f = button === null || button === void 0 ? void 0 : button.attrs) === null || _f === void 0 ? void 0 : _f.icon : "pi pi-pencil", className: "w-full text-left gap-2 ".concat(((_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.className) ? (_h = button === null || button === void 0 ? void 0 : button.attrs) === null || _h === void 0 ? void 0 : _h.className : ''), label: button.attrs.label, size: "small", onClick: function () {
             var event = {
                 params: params,
-                rowData: rowData,
+                rowData: selectedSolidViewData,
                 solidListViewMetaData: solidListViewMetaData.data,
             };
             var modifiedButtonAttrs = __assign({}, button.attrs); // Create a copy
@@ -32,7 +34,6 @@ export var SolidListViewRowButtonContextMenu = function (_a) {
                 modifiedButtonAttrs.popupWidth = '30vw';
             }
             handleCustomButtonClick(modifiedButtonAttrs, event);
-            onActionComplete === null || onActionComplete === void 0 ? void 0 : onActionComplete();
-        }, children: [_jsx("i", { className: "".concat(((_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.icon) ? (_h = button === null || button === void 0 ? void 0 : button.attrs) === null || _h === void 0 ? void 0 : _h.icon : "pi pi-pencil", " solid-row-action-button-icon") }), _jsx("span", { className: "solid-row-action-button-label", children: button.attrs.label })] }));
+        } }));
 };
 //# sourceMappingURL=SolidListViewRowButtonContextMenu.js.map

package/dist/components/core/list/SolidListViewRowButtonContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidListViewRowButtonContextMenu.js","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListViewRowButtonContextMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,MAAM,CAAC,IAAM,iCAAiC,GAAG,UAAC,EAAkG;;QAAhG,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,qBAAqB,2BAAA,EAAE,uBAAuB,6BAAA,EAAE,gBAAgB,sBAAA;IAEnI,IAAA,KAA4B,UAAU,EAAE,EAAhC,OAAO,UAAA,EAAE,MAAM,YAAiB,CAAC;IAC/C,IAAM,IAAI,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC;IAE3B,IAAM,OAAO,GAAG,CAAC,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,MAAM,MAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,CAAC;IAElI,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACH,kBACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,kCAA2B,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EAChG,OAAO,EAAE;YACL,IAAM,KAAK,GAAG;gBACV,MAAM,QAAA;gBACN,OAAO,EAAE,OAAO;gBAChB,qBAAqB,EAAE,qBAAqB,CAAC,IAAI;aACpD,CAAC;YAEF,IAAM,mBAAmB,gBAAQ,MAAM,CAAC,KAAK,CAAE,CAAC,CAAC,gBAAgB;YAEjE,oDAAoD;YACpD,IAAI,mBAAmB,CAAC,MAAM,KAAK,4BAA4B,IAAI,mBAAmB,CAAC,MAAM,KAAK,6BAA6B,EAAE;gBAC7H,mBAAmB,CAAC,UAAU,GAAG,MAAM,CAAC;aAC3C;YAED,uBAAuB,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;YACpD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,EAAI,CAAC;QACzB,CAAC,aAED,YAAG,SAAS,EAAE,UAAG,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,CAAC,CAAC,CAAC,cAAc,kCAA+B,GAAI,EAC9G,eAAM,SAAS,EAAC,+BAA+B,YAAE,MAAM,CAAC,KAAK,CAAC,KAAK,GAAQ,IACtE,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useSession } from \"../../../hooks/useSession\";\nimport { hasAnyRole } from \"../../../helpers/rolesHelper\";\n\nexport const SolidListViewRowButtonContextMenu = ({ button, params, rowData, solidListViewMetaData, handleCustomButtonClick, onActionComplete }: any) => {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n\n    if (!hasRole) return null;\n\n    return (\n        <button\n            type=\"button\"\n            className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n            onClick={() => {\n                const event = {\n                    params,\n                    rowData: rowData,\n                    solidListViewMetaData: solidListViewMetaData.data,\n                };\n\n                const modifiedButtonAttrs = { ...button.attrs }; // Create a copy\n\n                // Conditionally add popupWidth for specific actions\n                if (modifiedButtonAttrs.action === 'GenerateModelCodeRowAction' || modifiedButtonAttrs.action === 'GenerateModuleCodeRowAction') {\n                    modifiedButtonAttrs.popupWidth = '30vw';\n                }\n\n                handleCustomButtonClick(modifiedButtonAttrs, event);\n                onActionComplete?.();\n            }}\n        >\n            <i className={`${button?.attrs?.icon ? button?.attrs?.icon : \"pi pi-pencil\"} solid-row-action-button-icon`} />\n            <span className=\"solid-row-action-button-label\">{button.attrs.label}</span>\n        </button>\n    );\n};\n"]}
+{"version":3,"file":"SolidListViewRowButtonContextMenu.js","sourceRoot":"","sources":["../../../../src/components/core/list/SolidListViewRowButtonContextMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,IAAM,iCAAiC,GAAG,UAAC,EAAiG;;QAA/F,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,wBAAwB,8BAAA,EAAE,qBAAqB,2BAAA,EAAE,uBAAuB,6BAAA;IACxI,IAAM,qBAAqB,GAAG,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,EAAI,CAAC;IAErD,IAAA,KAA4B,UAAU,EAAE,EAAhC,OAAO,UAAA,EAAE,MAAM,YAAiB,CAAC;IAC/C,IAAM,IAAI,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC;IAE3B,IAAM,OAAO,GAAG,CAAC,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,MAAM,MAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,CAAC;IAElI,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACH,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,CAAC,CAAC,CAAC,cAAc,EAChE,SAAS,EAAE,iCAA0B,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EAC/F,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EACzB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE;YACL,IAAM,KAAK,GAAG;gBACV,MAAM,QAAA;gBACN,OAAO,EAAE,qBAAqB;gBAC9B,qBAAqB,EAAE,qBAAqB,CAAC,IAAI;aACpD,CAAC;YAEF,IAAM,mBAAmB,gBAAQ,MAAM,CAAC,KAAK,CAAE,CAAC,CAAC,gBAAgB;YAEjE,oDAAoD;YACpD,IAAI,mBAAmB,CAAC,MAAM,KAAK,4BAA4B,IAAI,mBAAmB,CAAC,MAAM,KAAK,6BAA6B,EAAE;gBAC7H,mBAAmB,CAAC,UAAU,GAAG,MAAM,CAAC;aAC3C;YAED,uBAAuB,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACxD,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useSession } from \"../../../hooks/useSession\";\nimport { hasAnyRole } from \"../../../helpers/rolesHelper\";\nimport { Button } from \"primereact/button\";\n\nexport const SolidListViewRowButtonContextMenu = ({ button, params, getSelectedSolidViewData, solidListViewMetaData, handleCustomButtonClick }: any) => {\n    const selectedSolidViewData = getSelectedSolidViewData?.();\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n\n    if (!hasRole) return null;\n\n    return (\n        <Button\n            type=\"button\"\n            icon={button?.attrs?.icon ? button?.attrs?.icon : \"pi pi-pencil\"}\n            className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n            label={button.attrs.label}\n            size=\"small\"\n            onClick={() => {\n                const event = {\n                    params,\n                    rowData: selectedSolidViewData,\n                    solidListViewMetaData: solidListViewMetaData.data,\n                };\n\n                const modifiedButtonAttrs = { ...button.attrs }; // Create a copy\n\n                // Conditionally add popupWidth for specific actions\n                if (modifiedButtonAttrs.action === 'GenerateModelCodeRowAction' || modifiedButtonAttrs.action === 'GenerateModuleCodeRowAction') {\n                    modifiedButtonAttrs.popupWidth = '30vw';\n                }\n\n                handleCustomButtonClick(modifiedButtonAttrs, event);\n            }}\n        />\n    );\n};\n"]}

package/dist/components/core/list/SolidListViewRowButtonContextMenu.tsx

@@ -1,7 +1,9 @@
 import { useSession } from "../../../hooks/useSession";
 import { hasAnyRole } from "../../../helpers/rolesHelper";
+import { Button } from "primereact/button";
 
-export const SolidListViewRowButtonContextMenu = ({ button, params, rowData, solidListViewMetaData, handleCustomButtonClick, onActionComplete }: any) => {
+export const SolidListViewRowButtonContextMenu = ({ button, params, getSelectedSolidViewData, solidListViewMetaData, handleCustomButtonClick }: any) => {
+    const selectedSolidViewData = getSelectedSolidViewData?.();
 
     const { data: session, status } = useSession();
     const user = session?.user;
@@ -11,13 +13,16 @@ export const SolidListViewRowButtonContextMenu = ({ button, params, rowData, sol
     if (!hasRole) return null;
 
     return (
-        <button
+        <Button
             type="button"
-            className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+            icon={button?.attrs?.icon ? button?.attrs?.icon : "pi pi-pencil"}
+            className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+            label={button.attrs.label}
+            size="small"
             onClick={() => {
                 const event = {
                     params,
-                    rowData: rowData,
+                    rowData: selectedSolidViewData,
                     solidListViewMetaData: solidListViewMetaData.data,
                 };
 
@@ -29,11 +34,7 @@ export const SolidListViewRowButtonContextMenu = ({ button, params, rowData, sol
                 }
 
                 handleCustomButtonClick(modifiedButtonAttrs, event);
-                onActionComplete?.();
             }}
-        >
-            <i className={`${button?.attrs?.icon ? button?.attrs?.icon : "pi pi-pencil"} solid-row-action-button-icon`} />
-            <span className="solid-row-action-button-label">{button.attrs.label}</span>
-        </button>
+        />
     );
 };

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

@@ -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

@@ -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"}
+{"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

@@ -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); } }))] }));
 }