@solidxai/core-ui 0.1.8-beta.2 → 0.1.8-beta.21

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 import { KeyRound, Plus } from "lucide-react";
 import "./ApiKeysTab.css";
@@ -33,33 +33,43 @@ function ApiKeysTable({
   keys,
   onToggleActive,
   isTogglingId,
+  onGenerateFirstKey,
+  canCreate,
 }: {
   keys: ApiKeyRecord[];
   onToggleActive: (key: ApiKeyRecord) => void;
   isTogglingId: string | null;
+  onGenerateFirstKey: () => void;
+  canCreate: boolean;
 }) {
   if (keys.length === 0) {
     return (
-      <div
-        className="flex flex-column align-items-center justify-content-center gap-3 py-6"
-        style={{ color: "var(--solid-text-secondary, #888)" }}
-      >
-        <KeyRound size={32} strokeWidth={1.5} />
+      <div className="solid-api-keys-empty">
+        <div className="solid-api-keys-empty-icon">
+          <KeyRound size={30} strokeWidth={1.6} />
+        </div>
         <div className="text-center">
-          <p className="m-0" style={{ fontSize: 14, fontWeight: 500 }}>
-            No API keys
-          </p>
-          <p className="m-0 mt-1" style={{ fontSize: 12 }}>
-            Generate a key to enable programmatic access.
+          <p className="solid-api-keys-empty-title m-0">No API keys yet</p>
+          <p className="solid-api-keys-empty-copy m-0">
+            {canCreate
+              ? "Generate a key to enable secure programmatic access for this user."
+              : "API key generation is disabled for this user account."}
           </p>
         </div>
+        {canCreate ? (
+          <SolidButton type="button" onClick={onGenerateFirstKey}>
+            <Plus size={14} />
+            Generate First Key
+          </SolidButton>
+        ) : null}
       </div>
     );
   }
 
   return (
-    <div style={{ overflowX: "auto" }}>
-      <table style={{ width: "100%", borderCollapse: "collapse", tableLayout: "fixed" }}>
+    <div className="solid-api-keys-table-shell">
+      <div className="solid-api-keys-table-wrap">
+        <table className="solid-api-keys-table">
         <colgroup>
           <col style={{ width: "18%" }} />
           <col style={{ width: "22%" }} />
@@ -75,7 +85,7 @@ function ApiKeysTable({
             <th className="solid-api-keys-th">Status</th>
             <th className="solid-api-keys-th">Expires</th>
             <th className="solid-api-keys-th">Last Used</th>
-            <th className="solid-api-keys-th" style={{ textAlign: "right" }}>Active</th>
+            <th className="solid-api-keys-th solid-api-keys-th--right">Active</th>
           </tr>
         </thead>
         <tbody>
@@ -86,21 +96,11 @@ function ApiKeysTable({
             return (
               <tr key={key.id} className={isExpired ? "solid-api-keys-row--expired" : undefined}>
                 <td className="solid-api-keys-td">
-                  <span style={{ fontWeight: 500 }}>{key.name}</span>
+                  <span className="solid-api-keys-name">{key.name}</span>
                 </td>
 
                 <td className="solid-api-keys-td">
-                  <code
-                    style={{
-                      fontFamily: "monospace",
-                      fontSize: 13,
-                      background: "var(--solid-surface-secondary, #f5f5f5)",
-                      padding: "2px 6px",
-                      borderRadius: 4,
-                    }}
-                  >
-                    {key.maskedKey}
-                  </code>
+                  <code className="solid-api-keys-code">{key.maskedKey}</code>
                 </td>
 
                 <td className="solid-api-keys-td">
@@ -115,29 +115,19 @@ function ApiKeysTable({
                   )}
                 </td>
 
-                <td
-                  className="solid-api-keys-td"
-                  style={{
-                    color:
-                      expiryStatus === "expired"
-                        ? "var(--solid-danger-color, #ef4444)"
-                        : expiryStatus === "expiring-soon"
-                        ? "var(--solid-warn-color, #f59e0b)"
-                        : undefined,
-                  }}
-                >
+                <td className={`solid-api-keys-td ${expiryStatus === "expired" ? "solid-api-keys-date--expired" : ""} ${expiryStatus === "expiring-soon" ? "solid-api-keys-date--warning" : ""}`}>
                   {expiryStatus === "never" ? (
-                    <span style={{ color: "var(--solid-text-secondary, #888)" }}>Never</span>
+                    <span className="solid-api-keys-muted">Never</span>
                   ) : (
                     formatDate(key.expiresAt)
                   )}
                 </td>
 
-                <td className="solid-api-keys-td" style={{ color: "var(--solid-text-secondary, #888)" }}>
+                <td className="solid-api-keys-td solid-api-keys-muted">
                   {formatDate(key.lastUsedAt)}
                 </td>
 
-                <td className="solid-api-keys-td" style={{ textAlign: "right" }}>
+                <td className="solid-api-keys-td solid-api-keys-td--right">
                   {isTogglingId === key.id ? (
                     <SolidSpinner />
                   ) : (
@@ -152,7 +142,8 @@ function ApiKeysTable({
             );
           })}
         </tbody>
-      </table>
+        </table>
+      </div>
     </div>
   );
 }
@@ -164,13 +155,18 @@ interface ApiKeysTabProps {
 
 export function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {
   const dispatch = useDispatch();
-  const { data, isLoading, isError } = useGetUserApiKeysQuery(userId);
+  const { data, isLoading, isError, refetch } = useGetUserApiKeysQuery(userId);
   const [updateApiKey] = useUpdateApiKeyMutation();
   const [togglingId, setTogglingId] = useState<string | null>(null);
   const [showGenerate, setShowGenerate] = useState(false);
   const [revealKey, setRevealKey] = useState<{ apiKey: string; keyName: string } | null>(null);
+  const [optimisticKeys, setOptimisticKeys] = useState<ApiKeyRecord[]>([]);
 
-  const keys: ApiKeyRecord[] = data?.data?.apiKeys ?? [];
+  const keys = useMemo(() => {
+    const serverKeys = data?.data?.apiKeys ?? [];
+    const merged = [...optimisticKeys.filter((key) => !serverKeys.some((serverKey) => serverKey.id === key.id)), ...serverKeys];
+    return merged.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+  }, [data?.data?.apiKeys, optimisticKeys]);
 
   const handleToggle = async (key: ApiKeyRecord) => {
     setTogglingId(key.id);
@@ -199,37 +195,41 @@ export function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {
   return (
     <>
       <div className="solid-api-keys-tab">
-        <div className="flex align-items-center justify-content-between mb-4">
-          <div>
-            <p className="m-0" style={{ fontWeight: 600, fontSize: 14 }}>
-              API Keys
-            </p>
-            <p className="m-0 mt-1" style={{ fontSize: 12, color: "var(--solid-text-secondary, #888)" }}>
+        <div className="solid-api-keys-hero">
+          <div className="solid-api-keys-copy">
+            <p className="solid-api-keys-title m-0">API Keys</p>
+            <p className="solid-api-keys-subtitle m-0">
               Keys grant programmatic access. Store them securely — they are shown only once.
             </p>
           </div>
-          {canCreate && (
-            <SolidButton size="small" type="button" onClick={() => setShowGenerate(true)}>
-              <Plus size={14} />
-              Generate Key
-            </SolidButton>
-          )}
+          <div className="solid-api-keys-actions">
+            <span className="solid-api-keys-count">{keys.length} key{keys.length === 1 ? "" : "s"}</span>
+            {canCreate ? (
+              <SolidButton size="small" type="button" onClick={() => setShowGenerate(true)}>
+                <Plus size={14} />
+                Generate Key
+              </SolidButton>
+            ) : null}
+          </div>
         </div>
 
         {isLoading ? (
-          <div className="flex justify-content-center py-5">
+          <div className="solid-api-keys-state">
             <SolidSpinner />
           </div>
         ) : isError && keys.length === 0 ? (
-          <div
-            className="flex flex-column align-items-center justify-content-center gap-2 py-5"
-            style={{ color: "var(--solid-text-secondary, #888)", fontSize: 13 }}
-          >
+          <div className="solid-api-keys-error">
             <p className="m-0">Something went wrong while loading API keys.</p>
             <p className="m-0">Please refresh the page and try again.</p>
           </div>
         ) : (
-          <ApiKeysTable keys={keys} onToggleActive={handleToggle} isTogglingId={togglingId} />
+          <ApiKeysTable
+            keys={keys}
+            onToggleActive={handleToggle}
+            isTogglingId={togglingId}
+            onGenerateFirstKey={() => setShowGenerate(true)}
+            canCreate={canCreate}
+          />
         )}
       </div>
 
@@ -237,8 +237,10 @@ export function ApiKeysTab({ userId, canCreate = false }: ApiKeysTabProps) {
         open={showGenerate}
         userId={Number(userId)}
         onClose={() => setShowGenerate(false)}
-        onCreated={(apiKey, keyName) => {
+        onCreated={(apiKey, keyName, record) => {
           setShowGenerate(false);
+          setOptimisticKeys((previous) => [record, ...previous.filter((existing) => existing.id !== record.id)]);
+          void refetch();
           setRevealKey({ apiKey, keyName });
         }}
       />

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.d.ts

@@ -1,7 +1,8 @@
+import { type ApiKeyRecord } from "../../../../redux/api/apiKeyApi";
 interface GenerateApiKeyModalProps {
     open: boolean;
     onClose: () => void;
-    onCreated: (rawApiKey: string, keyName: string) => void;
+    onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;
     userId?: number;
 }
 export declare function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GenerateApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"AAmDA,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CA4HjG"}
+{"version":3,"file":"GenerateApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,YAAY,EAAoC,MAAM,iCAAiC,CAAC;AAiCtG,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CAkIjG"}

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.js

@@ -50,7 +50,7 @@ import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { SolidButton, SolidDatePicker, SolidDialog, SolidDialogBody, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidInput, SolidMessage, SolidSelect, } from "../../../shad-cn-ui";
+import { SolidButton, SolidDatePicker, SolidDialog, SolidDialogBody, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidInput, SolidMessage, SolidSelect, } from "../../../shad-cn-ui";
 import { showToast } from "../../../../redux/features/toastSlice";
 import { useGenerateApiKeyForUserMutation } from "../../../../redux/api/apiKeyApi";
 var EXPIRY_OPTIONS = [
@@ -118,7 +118,7 @@ export function GenerateApiKeyModal(_a) {
                         return [4 /*yield*/, generateApiKeyForUser({ userId: userId, body: body }).unwrap()];
                     case 2:
                         response = _b.sent();
-                        onCreated(response.data.apiKey, values.name.trim());
+                        onCreated(response.data.apiKey, values.name.trim(), response.data.record);
                         handleClose();
                         return [3 /*break*/, 4];
                     case 3:
@@ -147,11 +147,11 @@ export function GenerateApiKeyModal(_a) {
     var expiryError = formik.touched.expiryOption && formik.errors.expiryOption
         ? String(formik.errors.expiryOption)
         : "";
-    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, style: { maxWidth: 480 }, children: [_jsx(SolidDialogHeader, { children: _jsx(SolidDialogTitle, { children: "Generate API Key" }) }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { children: _jsx("form", { id: "generate-api-key-form", onSubmit: formik.handleSubmit, children: _jsxs("div", { className: "flex flex-column gap-3", children: [_jsxs("div", { className: "flex flex-column gap-2", children: [_jsxs("label", { htmlFor: "api-key-name", className: "form-field-label", children: ["Key Name ", _jsx("span", { style: { color: "var(--solid-danger-color, #ef4444)" }, children: "*" })] }), _jsx(SolidInput, { id: "api-key-name", name: "name", autoComplete: "off", placeholder: "e.g. CI/CD pipeline, Mobile app", value: formik.values.name, onChange: formik.handleChange, onBlur: formik.handleBlur }), nameError && _jsx(SolidMessage, { severity: "error", text: nameError })] }), _jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { htmlFor: "api-key-expiry", className: "form-field-label", children: "Expires" }), _jsx(SolidSelect, { value: formik.values.expiryOption, options: EXPIRY_OPTIONS, optionLabel: "label", optionValue: "value", onChange: function (_a) {
+    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, style: { maxWidth: 480 }, className: "solid-api-key-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-api-key-dialog-header", children: [_jsx(SolidDialogTitle, { children: "Generate API Key" }), _jsx(SolidDialogDescription, { children: "Create a named key for this user. The raw key will be shown only once after generation." })] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "solid-api-key-dialog-body", children: _jsx("form", { id: "generate-api-key-form", onSubmit: formik.handleSubmit, children: _jsxs("div", { className: "solid-api-key-dialog-fields", children: [_jsxs("div", { className: "solid-api-key-dialog-field", children: [_jsxs("label", { htmlFor: "api-key-name", className: "form-field-label", children: ["Key Name ", _jsx("span", { style: { color: "var(--solid-danger-color, #ef4444)" }, children: "*" })] }), _jsx(SolidInput, { id: "api-key-name", name: "name", autoComplete: "off", placeholder: "e.g. CI/CD pipeline, Mobile app", value: formik.values.name, onChange: formik.handleChange, onBlur: formik.handleBlur }), nameError && _jsx(SolidMessage, { severity: "error", text: nameError })] }), _jsxs("div", { className: "solid-api-key-dialog-field", children: [_jsx("label", { htmlFor: "api-key-expiry", className: "form-field-label", children: "Expires" }), _jsx(SolidSelect, { value: formik.values.expiryOption, options: EXPIRY_OPTIONS, optionLabel: "label", optionValue: "value", onChange: function (_a) {
                                             var value = _a.value;
                                             formik.setFieldValue("expiryOption", value);
                                             if (value !== "custom")
                                                 setCustomDate(null);
-                                        } }), formik.values.expiryOption === "custom" && (_jsx(SolidDatePicker, { selected: customDate, onChange: function (date) { return setCustomDate(date); }, minDate: new Date(), placeholderText: "Select expiry date", dateFormat: "dd/MM/yyyy" })), expiryError && _jsx(SolidMessage, { severity: "error", text: expiryError })] })] }) }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { children: [_jsx(SolidButton, { variant: "outline", type: "button", onClick: handleClose, disabled: isLoading, children: "Cancel" }), _jsx(SolidButton, { type: "submit", form: "generate-api-key-form", loading: isLoading, children: "Generate Key" })] })] }));
+                                        } }), formik.values.expiryOption === "custom" && (_jsx(SolidDatePicker, { selected: customDate, onChange: function (date) { return setCustomDate(date); }, minDate: new Date(), placeholderText: "Select expiry date", dateFormat: "dd/MM/yyyy" })), formik.values.expiryOption !== "custom" ? (_jsx("p", { className: "solid-api-key-dialog-hint m-0", children: "Choose how long this key should remain valid." })) : null, expiryError && _jsx(SolidMessage, { severity: "error", text: expiryError })] })] }) }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { className: "solid-api-key-dialog-footer", children: [_jsx(SolidButton, { variant: "outline", type: "button", onClick: handleClose, disabled: isLoading, children: "Cancel" }), _jsx(SolidButton, { type: "submit", form: "generate-api-key-form", loading: isLoading, children: "Generate Key" })] })] }));
 }
 //# sourceMappingURL=GenerateApiKeyModal.js.map

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenerateApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useFormik } from \"formik\";\nimport * as Yup from \"yup\";\nimport {\n  SolidButton,\n  SolidDatePicker,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n  SolidInput,\n  SolidMessage,\n  SolidSelect,\n} from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport { useGenerateApiKeyForUserMutation } from \"../../../../redux/api/apiKeyApi\";\n\nconst EXPIRY_OPTIONS = [\n  { label: \"30 days\", value: \"30d\" },\n  { label: \"60 days\", value: \"60d\" },\n  { label: \"90 days\", value: \"90d\" },\n  { label: \"Never\", value: \"never\" },\n  { label: \"Custom date\", value: \"custom\" },\n];\n\nfunction addDays(days: number): string {\n  const d = new Date();\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nfunction resolveExpiresAt(expiryOption: string, customDate: Date | null): string | undefined {\n  switch (expiryOption) {\n    case \"30d\":\n      return addDays(30);\n    case \"60d\":\n      return addDays(60);\n    case \"90d\":\n      return addDays(90);\n    case \"never\":\n      return undefined;\n    case \"custom\":\n      return customDate ? customDate.toISOString() : undefined;\n    default:\n      return undefined;\n  }\n}\n\ninterface GenerateApiKeyModalProps {\n  open: boolean;\n  onClose: () => void;\n  onCreated: (rawApiKey: string, keyName: string) => void;\n  userId?: number;\n}\n\nexport function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps) {\n  const dispatch = useDispatch();\n  const [generateApiKeyForUser, { isLoading }] = useGenerateApiKeyForUserMutation();\n  const [customDate, setCustomDate] = useState<Date | null>(null);\n\n  const formik = useFormik({\n    initialValues: {\n      name: \"\",\n      expiryOption: \"30d\",\n    },\n    validationSchema: Yup.object({\n      name: Yup.string()\n        .trim()\n        .min(2, \"Name must be at least 2 characters\")\n        .max(64, \"Name must be 64 characters or fewer\")\n        .required(\"Key name is required\"),\n      expiryOption: Yup.string().required(\"Expiry is required\"),\n    }),\n    onSubmit: async (values, helpers) => {\n      if (values.expiryOption === \"custom\" && !customDate) {\n        helpers.setFieldError(\"expiryOption\", \"Please select a custom expiry date\");\n        return;\n      }\n\n      const expiresAt = resolveExpiresAt(values.expiryOption, customDate);\n\n      try {\n        const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };\n        const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();\n\n        onCreated(response.data.apiKey, values.name.trim());\n        handleClose();\n      } catch (err: any) {\n        const detail = err?.data?.message || \"Failed to generate API key. Please try again.\";\n        dispatch(showToast({ severity: \"error\", summary: \"Error\", detail }));\n      }\n    },\n  });\n\n  const handleClose = () => {\n    formik.resetForm();\n    setCustomDate(null);\n    onClose();\n  };\n\n  // Reset form when modal opens\n  useEffect(() => {\n    if (open) {\n      formik.resetForm();\n      setCustomDate(null);\n    }\n  }, [open]);\n\n  const nameError =\n    formik.touched.name && formik.errors.name ? String(formik.errors.name) : \"\";\n  const expiryError =\n    formik.touched.expiryOption && formik.errors.expiryOption\n      ? String(formik.errors.expiryOption)\n      : \"\";\n\n  return (\n    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }}>\n      <SolidDialogHeader>\n        <SolidDialogTitle>Generate API Key</SolidDialogTitle>\n      </SolidDialogHeader>\n      <SolidDialogSeparator />\n      <SolidDialogBody>\n        <form id=\"generate-api-key-form\" onSubmit={formik.handleSubmit}>\n          <div className=\"flex flex-column gap-3\">\n            <div className=\"flex flex-column gap-2\">\n              <label htmlFor=\"api-key-name\" className=\"form-field-label\">\n                Key Name <span style={{ color: \"var(--solid-danger-color, #ef4444)\" }}>*</span>\n              </label>\n              <SolidInput\n                id=\"api-key-name\"\n                name=\"name\"\n                autoComplete=\"off\"\n                placeholder=\"e.g. CI/CD pipeline, Mobile app\"\n                value={formik.values.name}\n                onChange={formik.handleChange}\n                onBlur={formik.handleBlur}\n              />\n              {nameError && <SolidMessage severity=\"error\" text={nameError} />}\n            </div>\n\n            <div className=\"flex flex-column gap-2\">\n              <label htmlFor=\"api-key-expiry\" className=\"form-field-label\">\n                Expires\n              </label>\n              <SolidSelect\n                value={formik.values.expiryOption}\n                options={EXPIRY_OPTIONS}\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                onChange={({ value }) => {\n                  formik.setFieldValue(\"expiryOption\", value);\n                  if (value !== \"custom\") setCustomDate(null);\n                }}\n              />\n              {formik.values.expiryOption === \"custom\" && (\n                <SolidDatePicker\n                  selected={customDate}\n                  onChange={(date: Date | null) => setCustomDate(date)}\n                  minDate={new Date()}\n                  placeholderText=\"Select expiry date\"\n                  dateFormat=\"dd/MM/yyyy\"\n                />\n              )}\n              {expiryError && <SolidMessage severity=\"error\" text={expiryError} />}\n            </div>\n          </div>\n        </form>\n      </SolidDialogBody>\n      <SolidDialogSeparator />\n      <SolidDialogFooter>\n        <SolidButton variant=\"outline\" type=\"button\" onClick={handleClose} disabled={isLoading}>\n          Cancel\n        </SolidButton>\n        <SolidButton type=\"submit\" form=\"generate-api-key-form\" loading={isLoading}>\n          Generate Key\n        </SolidButton>\n      </SolidDialogFooter>\n    </SolidDialog>\n  );\n}\n"]}
+{"version":3,"file":"GenerateApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { useFormik } from \"formik\";\nimport * as Yup from \"yup\";\nimport {\n  SolidButton,\n  SolidDatePicker,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogDescription,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n  SolidInput,\n  SolidMessage,\n  SolidSelect,\n} from \"../../../shad-cn-ui\";\nimport { showToast } from \"../../../../redux/features/toastSlice\";\nimport { type ApiKeyRecord, useGenerateApiKeyForUserMutation } from \"../../../../redux/api/apiKeyApi\";\n\nconst EXPIRY_OPTIONS = [\n  { label: \"30 days\", value: \"30d\" },\n  { label: \"60 days\", value: \"60d\" },\n  { label: \"90 days\", value: \"90d\" },\n  { label: \"Never\", value: \"never\" },\n  { label: \"Custom date\", value: \"custom\" },\n];\n\nfunction addDays(days: number): string {\n  const d = new Date();\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nfunction resolveExpiresAt(expiryOption: string, customDate: Date | null): string | undefined {\n  switch (expiryOption) {\n    case \"30d\":\n      return addDays(30);\n    case \"60d\":\n      return addDays(60);\n    case \"90d\":\n      return addDays(90);\n    case \"never\":\n      return undefined;\n    case \"custom\":\n      return customDate ? customDate.toISOString() : undefined;\n    default:\n      return undefined;\n  }\n}\n\ninterface GenerateApiKeyModalProps {\n  open: boolean;\n  onClose: () => void;\n  onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;\n  userId?: number;\n}\n\nexport function GenerateApiKeyModal({ open, onClose, onCreated, userId }: GenerateApiKeyModalProps) {\n  const dispatch = useDispatch();\n  const [generateApiKeyForUser, { isLoading }] = useGenerateApiKeyForUserMutation();\n  const [customDate, setCustomDate] = useState<Date | null>(null);\n\n  const formik = useFormik({\n    initialValues: {\n      name: \"\",\n      expiryOption: \"30d\",\n    },\n    validationSchema: Yup.object({\n      name: Yup.string()\n        .trim()\n        .min(2, \"Name must be at least 2 characters\")\n        .max(64, \"Name must be 64 characters or fewer\")\n        .required(\"Key name is required\"),\n      expiryOption: Yup.string().required(\"Expiry is required\"),\n    }),\n    onSubmit: async (values, helpers) => {\n      if (values.expiryOption === \"custom\" && !customDate) {\n        helpers.setFieldError(\"expiryOption\", \"Please select a custom expiry date\");\n        return;\n      }\n\n      const expiresAt = resolveExpiresAt(values.expiryOption, customDate);\n\n      try {\n        const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };\n        const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();\n\n        onCreated(response.data.apiKey, values.name.trim(), response.data.record);\n        handleClose();\n      } catch (err: any) {\n        const detail = err?.data?.message || \"Failed to generate API key. Please try again.\";\n        dispatch(showToast({ severity: \"error\", summary: \"Error\", detail }));\n      }\n    },\n  });\n\n  const handleClose = () => {\n    formik.resetForm();\n    setCustomDate(null);\n    onClose();\n  };\n\n  // Reset form when modal opens\n  useEffect(() => {\n    if (open) {\n      formik.resetForm();\n      setCustomDate(null);\n    }\n  }, [open]);\n\n  const nameError =\n    formik.touched.name && formik.errors.name ? String(formik.errors.name) : \"\";\n  const expiryError =\n    formik.touched.expiryOption && formik.errors.expiryOption\n      ? String(formik.errors.expiryOption)\n      : \"\";\n\n  return (\n    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }} className=\"solid-api-key-dialog\">\n      <SolidDialogHeader className=\"solid-api-key-dialog-header\">\n        <SolidDialogTitle>Generate API Key</SolidDialogTitle>\n        <SolidDialogDescription>\n          Create a named key for this user. The raw key will be shown only once after generation.\n        </SolidDialogDescription>\n      </SolidDialogHeader>\n      <SolidDialogSeparator />\n      <SolidDialogBody className=\"solid-api-key-dialog-body\">\n        <form id=\"generate-api-key-form\" onSubmit={formik.handleSubmit}>\n          <div className=\"solid-api-key-dialog-fields\">\n            <div className=\"solid-api-key-dialog-field\">\n              <label htmlFor=\"api-key-name\" className=\"form-field-label\">\n                Key Name <span style={{ color: \"var(--solid-danger-color, #ef4444)\" }}>*</span>\n              </label>\n              <SolidInput\n                id=\"api-key-name\"\n                name=\"name\"\n                autoComplete=\"off\"\n                placeholder=\"e.g. CI/CD pipeline, Mobile app\"\n                value={formik.values.name}\n                onChange={formik.handleChange}\n                onBlur={formik.handleBlur}\n              />\n              {nameError && <SolidMessage severity=\"error\" text={nameError} />}\n            </div>\n\n            <div className=\"solid-api-key-dialog-field\">\n              <label htmlFor=\"api-key-expiry\" className=\"form-field-label\">\n                Expires\n              </label>\n              <SolidSelect\n                value={formik.values.expiryOption}\n                options={EXPIRY_OPTIONS}\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                onChange={({ value }) => {\n                  formik.setFieldValue(\"expiryOption\", value);\n                  if (value !== \"custom\") setCustomDate(null);\n                }}\n              />\n              {formik.values.expiryOption === \"custom\" && (\n                <SolidDatePicker\n                  selected={customDate}\n                  onChange={(date: Date | null) => setCustomDate(date)}\n                  minDate={new Date()}\n                  placeholderText=\"Select expiry date\"\n                  dateFormat=\"dd/MM/yyyy\"\n                />\n              )}\n              {formik.values.expiryOption !== \"custom\" ? (\n                <p className=\"solid-api-key-dialog-hint m-0\">Choose how long this key should remain valid.</p>\n              ) : null}\n              {expiryError && <SolidMessage severity=\"error\" text={expiryError} />}\n            </div>\n          </div>\n        </form>\n      </SolidDialogBody>\n      <SolidDialogSeparator />\n      <SolidDialogFooter className=\"solid-api-key-dialog-footer\">\n        <SolidButton variant=\"outline\" type=\"button\" onClick={handleClose} disabled={isLoading}>\n          Cancel\n        </SolidButton>\n        <SolidButton type=\"submit\" form=\"generate-api-key-form\" loading={isLoading}>\n          Generate Key\n        </SolidButton>\n      </SolidDialogFooter>\n    </SolidDialog>\n  );\n}\n"]}

package/dist/components/core/users/ApiKeysTab/GenerateApiKeyModal.tsx

@@ -7,6 +7,7 @@ import {
   SolidDatePicker,
   SolidDialog,
   SolidDialogBody,
+  SolidDialogDescription,
   SolidDialogFooter,
   SolidDialogHeader,
   SolidDialogSeparator,
@@ -16,7 +17,7 @@ import {
   SolidSelect,
 } from "../../../shad-cn-ui";
 import { showToast } from "../../../../redux/features/toastSlice";
-import { useGenerateApiKeyForUserMutation } from "../../../../redux/api/apiKeyApi";
+import { type ApiKeyRecord, useGenerateApiKeyForUserMutation } from "../../../../redux/api/apiKeyApi";
 
 const EXPIRY_OPTIONS = [
   { label: "30 days", value: "30d" },
@@ -52,7 +53,7 @@ function resolveExpiresAt(expiryOption: string, customDate: Date | null): string
 interface GenerateApiKeyModalProps {
   open: boolean;
   onClose: () => void;
-  onCreated: (rawApiKey: string, keyName: string) => void;
+  onCreated: (rawApiKey: string, keyName: string, record: ApiKeyRecord) => void;
   userId?: number;
 }
 
@@ -86,7 +87,7 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
         const body = { name: values.name.trim(), ...(expiresAt ? { expiresAt } : {}) };
         const response = await generateApiKeyForUser({ userId: userId!, body }).unwrap();
 
-        onCreated(response.data.apiKey, values.name.trim());
+        onCreated(response.data.apiKey, values.name.trim(), response.data.record);
         handleClose();
       } catch (err: any) {
         const detail = err?.data?.message || "Failed to generate API key. Please try again.";
@@ -117,15 +118,18 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
       : "";
 
   return (
-    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }}>
-      <SolidDialogHeader>
+    <SolidDialog open={open} onOpenChange={handleClose} style={{ maxWidth: 480 }} className="solid-api-key-dialog">
+      <SolidDialogHeader className="solid-api-key-dialog-header">
         <SolidDialogTitle>Generate API Key</SolidDialogTitle>
+        <SolidDialogDescription>
+          Create a named key for this user. The raw key will be shown only once after generation.
+        </SolidDialogDescription>
       </SolidDialogHeader>
       <SolidDialogSeparator />
-      <SolidDialogBody>
+      <SolidDialogBody className="solid-api-key-dialog-body">
         <form id="generate-api-key-form" onSubmit={formik.handleSubmit}>
-          <div className="flex flex-column gap-3">
-            <div className="flex flex-column gap-2">
+          <div className="solid-api-key-dialog-fields">
+            <div className="solid-api-key-dialog-field">
               <label htmlFor="api-key-name" className="form-field-label">
                 Key Name <span style={{ color: "var(--solid-danger-color, #ef4444)" }}>*</span>
               </label>
@@ -141,7 +145,7 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
               {nameError && <SolidMessage severity="error" text={nameError} />}
             </div>
 
-            <div className="flex flex-column gap-2">
+            <div className="solid-api-key-dialog-field">
               <label htmlFor="api-key-expiry" className="form-field-label">
                 Expires
               </label>
@@ -164,13 +168,16 @@ export function GenerateApiKeyModal({ open, onClose, onCreated, userId }: Genera
                   dateFormat="dd/MM/yyyy"
                 />
               )}
+              {formik.values.expiryOption !== "custom" ? (
+                <p className="solid-api-key-dialog-hint m-0">Choose how long this key should remain valid.</p>
+              ) : null}
               {expiryError && <SolidMessage severity="error" text={expiryError} />}
             </div>
           </div>
         </form>
       </SolidDialogBody>
       <SolidDialogSeparator />
-      <SolidDialogFooter>
+      <SolidDialogFooter className="solid-api-key-dialog-footer">
         <SolidButton variant="outline" type="button" onClick={handleClose} disabled={isLoading}>
           Cancel
         </SolidButton>

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RevealApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":"AAYA,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CA2F3F"}
+{"version":3,"file":"RevealApiKeyModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":"AAaA,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAuE3F"}

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { AlertTriangle, CheckCircle, Copy } from "lucide-react";
-import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from "../../../shad-cn-ui";
+import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from "../../../shad-cn-ui";
 export function RevealApiKeyModal(_a) {
     var open = _a.open, apiKey = _a.apiKey, keyName = _a.keyName, onClose = _a.onClose;
     var _b = useState(false), copied = _b[0], setCopied = _b[1];
@@ -15,23 +15,6 @@ export function RevealApiKeyModal(_a) {
         setCopied(false);
         onClose();
     };
-    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, dismissible: false, style: { maxWidth: 520 }, children: [_jsx(SolidDialogHeader, { children: _jsx(SolidDialogTitle, { children: "API Key Created" }) }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogBody, { children: [_jsxs("div", { className: "solid-api-key-reveal-warning flex align-items-start gap-2 mb-4", children: [_jsx(AlertTriangle, { size: 16, className: "flex-shrink-0 mt-1" }), _jsxs("p", { className: "m-0", style: { fontSize: 13 }, children: [_jsx("strong", { children: "Copy this key now." }), " It will not be shown again once you close this dialog. Store it somewhere secure."] })] }), _jsx("p", { className: "form-field-label mb-2", children: keyName }), _jsxs("div", { className: "solid-api-key-reveal-box flex align-items-center gap-2 p-3", style: {
-                            background: "var(--solid-surface-secondary, #f5f5f5)",
-                            borderRadius: 6,
-                            border: "1px solid var(--solid-border-color, #e0e0e0)",
-                        }, children: [_jsx("code", { className: "flex-1", style: {
-                                    fontFamily: "monospace",
-                                    fontSize: 13,
-                                    wordBreak: "break-all",
-                                    userSelect: "all",
-                                }, children: apiKey }), _jsx("button", { type: "button", title: copied ? "Copied!" : "Copy to clipboard", onClick: handleCopy, style: {
-                                    background: "none",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    padding: "4px",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    flexShrink: 0,
-                                }, children: copied ? (_jsx(CheckCircle, { size: 16, style: { color: "var(--solid-success-color, #22c55e)" } })) : (_jsx(Copy, { size: 16 })) })] }), copied && (_jsx("p", { className: "m-0 mt-2", style: { fontSize: 12, color: "var(--solid-success-color, #22c55e)" }, children: "Copied to clipboard!" }))] }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { children: [_jsx(SolidButton, { variant: "outline", onClick: handleClose, children: "Close" }), _jsx(SolidButton, { onClick: handleClose, children: "I've Saved This Key" })] })] }));
+    return (_jsxs(SolidDialog, { open: open, onOpenChange: handleClose, dismissible: false, style: { maxWidth: 520 }, className: "solid-api-key-dialog solid-api-key-dialog--reveal", children: [_jsxs(SolidDialogHeader, { className: "solid-api-key-dialog-header", children: [_jsx(SolidDialogTitle, { children: "API Key Created" }), _jsx(SolidDialogDescription, { children: "Copy this key now and store it in a secure place before closing this dialog." })] }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogBody, { className: "solid-api-key-dialog-body", children: [_jsxs("div", { className: "solid-api-key-reveal-warning", children: [_jsx(AlertTriangle, { size: 16, className: "solid-api-key-reveal-warning-icon" }), _jsxs("p", { className: "m-0", children: [_jsx("strong", { children: "Shown only once." }), " After this dialog closes, the raw key cannot be retrieved again."] })] }), _jsx("p", { className: "form-field-label mb-2", children: keyName }), _jsxs("div", { className: "solid-api-key-reveal-box", children: [_jsx("code", { className: "solid-api-key-reveal-code", children: apiKey }), _jsx("button", { type: "button", title: copied ? "Copied!" : "Copy to clipboard", onClick: handleCopy, className: "solid-api-key-reveal-copy", children: copied ? (_jsx(CheckCircle, { size: 16, className: "solid-api-key-reveal-copy-success" })) : (_jsx(Copy, { size: 16 })) })] }), copied && (_jsx("p", { className: "solid-api-key-reveal-copied m-0 mt-2", children: "Copied to clipboard." }))] }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { className: "solid-api-key-dialog-footer", children: [_jsx(SolidButton, { variant: "outline", onClick: handleClose, children: "Close" }), _jsx(SolidButton, { onClick: handleClose, children: "I've Saved This Key" })] })] }));
 }
 //# sourceMappingURL=RevealApiKeyModal.js.map

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RevealApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { AlertTriangle, CheckCircle, Copy } from \"lucide-react\";\nimport {\n  SolidButton,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n} from \"../../../shad-cn-ui\";\n\ninterface RevealApiKeyModalProps {\n  open: boolean;\n  apiKey: string;\n  keyName: string;\n  onClose: () => void;\n}\n\nexport function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiKeyModalProps) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(apiKey).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 3000);\n    });\n  };\n\n  const handleClose = () => {\n    setCopied(false);\n    onClose();\n  };\n\n  return (\n    <SolidDialog open={open} onOpenChange={handleClose} dismissible={false} style={{ maxWidth: 520 }}>\n      <SolidDialogHeader>\n        <SolidDialogTitle>API Key Created</SolidDialogTitle>\n      </SolidDialogHeader>\n      <SolidDialogSeparator />\n      <SolidDialogBody>\n        <div className=\"solid-api-key-reveal-warning flex align-items-start gap-2 mb-4\">\n          <AlertTriangle size={16} className=\"flex-shrink-0 mt-1\" />\n          <p className=\"m-0\" style={{ fontSize: 13 }}>\n            <strong>Copy this key now.</strong> It will not be shown again once you close this dialog. Store it somewhere secure.\n          </p>\n        </div>\n\n        <p className=\"form-field-label mb-2\">\n          {keyName}\n        </p>\n\n        <div\n          className=\"solid-api-key-reveal-box flex align-items-center gap-2 p-3\"\n          style={{\n            background: \"var(--solid-surface-secondary, #f5f5f5)\",\n            borderRadius: 6,\n            border: \"1px solid var(--solid-border-color, #e0e0e0)\",\n          }}\n        >\n          <code\n            className=\"flex-1\"\n            style={{\n              fontFamily: \"monospace\",\n              fontSize: 13,\n              wordBreak: \"break-all\",\n              userSelect: \"all\",\n            }}\n          >\n            {apiKey}\n          </code>\n          <button\n            type=\"button\"\n            title={copied ? \"Copied!\" : \"Copy to clipboard\"}\n            onClick={handleCopy}\n            style={{\n              background: \"none\",\n              border: \"none\",\n              cursor: \"pointer\",\n              padding: \"4px\",\n              display: \"flex\",\n              alignItems: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            {copied ? (\n              <CheckCircle size={16} style={{ color: \"var(--solid-success-color, #22c55e)\" }} />\n            ) : (\n              <Copy size={16} />\n            )}\n          </button>\n        </div>\n\n        {copied && (\n          <p className=\"m-0 mt-2\" style={{ fontSize: 12, color: \"var(--solid-success-color, #22c55e)\" }}>\n            Copied to clipboard!\n          </p>\n        )}\n      </SolidDialogBody>\n      <SolidDialogSeparator />\n      <SolidDialogFooter>\n        <SolidButton variant=\"outline\" onClick={handleClose}>\n          Close\n        </SolidButton>\n        <SolidButton onClick={handleClose}>\n          I've Saved This Key\n        </SolidButton>\n      </SolidDialogFooter>\n    </SolidDialog>\n  );\n}\n"]}
+{"version":3,"file":"RevealApiKeyModal.js","sourceRoot":"","sources":["../../../../../src/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EACL,WAAW,EACX,WAAW,EACX,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,UAAU,iBAAiB,CAAC,EAA0D;QAAxD,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA;IAC1D,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAM,UAAU,GAAG;QACjB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;YACzC,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,UAAU,CAAC,cAAM,OAAA,SAAS,CAAC,KAAK,CAAC,EAAhB,CAAgB,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG;QAClB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EACxB,SAAS,EAAC,mDAAmD,aAE7D,MAAC,iBAAiB,IAAC,SAAS,EAAC,6BAA6B,aACxD,KAAC,gBAAgB,kCAAmC,EACpD,KAAC,sBAAsB,+FAEE,IACP,EACpB,KAAC,oBAAoB,KAAG,EACxB,MAAC,eAAe,IAAC,SAAS,EAAC,2BAA2B,aACpD,eAAK,SAAS,EAAC,8BAA8B,aAC3C,KAAC,aAAa,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,mCAAmC,GAAG,EACzE,aAAG,SAAS,EAAC,KAAK,aAChB,gDAAiC,yEAC/B,IACA,EAEN,YAAG,SAAS,EAAC,uBAAuB,YAAE,OAAO,GAAK,EAElD,eAAK,SAAS,EAAC,0BAA0B,aACvC,eAAM,SAAS,EAAC,2BAA2B,YAAE,MAAM,GAAQ,EAC3D,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,EAC/C,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,2BAA2B,YAEpC,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,mCAAmC,GAAG,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,CACnB,GACM,IACL,EAEL,MAAM,IAAI,CACT,YAAG,SAAS,EAAC,sCAAsC,qCAAyB,CAC7E,IACe,EAClB,KAAC,oBAAoB,KAAG,EACxB,MAAC,iBAAiB,IAAC,SAAS,EAAC,6BAA6B,aACxD,KAAC,WAAW,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,sBAErC,EACd,KAAC,WAAW,IAAC,OAAO,EAAE,WAAW,oCAEnB,IACI,IACR,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { AlertTriangle, CheckCircle, Copy } from \"lucide-react\";\nimport {\n  SolidButton,\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogDescription,\n  SolidDialogFooter,\n  SolidDialogHeader,\n  SolidDialogSeparator,\n  SolidDialogTitle,\n} from \"../../../shad-cn-ui\";\n\ninterface RevealApiKeyModalProps {\n  open: boolean;\n  apiKey: string;\n  keyName: string;\n  onClose: () => void;\n}\n\nexport function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiKeyModalProps) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(apiKey).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 3000);\n    });\n  };\n\n  const handleClose = () => {\n    setCopied(false);\n    onClose();\n  };\n\n  return (\n    <SolidDialog\n      open={open}\n      onOpenChange={handleClose}\n      dismissible={false}\n      style={{ maxWidth: 520 }}\n      className=\"solid-api-key-dialog solid-api-key-dialog--reveal\"\n    >\n      <SolidDialogHeader className=\"solid-api-key-dialog-header\">\n        <SolidDialogTitle>API Key Created</SolidDialogTitle>\n        <SolidDialogDescription>\n          Copy this key now and store it in a secure place before closing this dialog.\n        </SolidDialogDescription>\n      </SolidDialogHeader>\n      <SolidDialogSeparator />\n      <SolidDialogBody className=\"solid-api-key-dialog-body\">\n        <div className=\"solid-api-key-reveal-warning\">\n          <AlertTriangle size={16} className=\"solid-api-key-reveal-warning-icon\" />\n          <p className=\"m-0\">\n            <strong>Shown only once.</strong> After this dialog closes, the raw key cannot be retrieved again.\n          </p>\n        </div>\n\n        <p className=\"form-field-label mb-2\">{keyName}</p>\n\n        <div className=\"solid-api-key-reveal-box\">\n          <code className=\"solid-api-key-reveal-code\">{apiKey}</code>\n          <button\n            type=\"button\"\n            title={copied ? \"Copied!\" : \"Copy to clipboard\"}\n            onClick={handleCopy}\n            className=\"solid-api-key-reveal-copy\"\n          >\n            {copied ? (\n              <CheckCircle size={16} className=\"solid-api-key-reveal-copy-success\" />\n            ) : (\n              <Copy size={16} />\n            )}\n          </button>\n        </div>\n\n        {copied && (\n          <p className=\"solid-api-key-reveal-copied m-0 mt-2\">Copied to clipboard.</p>\n        )}\n      </SolidDialogBody>\n      <SolidDialogSeparator />\n      <SolidDialogFooter className=\"solid-api-key-dialog-footer\">\n        <SolidButton variant=\"outline\" onClick={handleClose}>\n          Close\n        </SolidButton>\n        <SolidButton onClick={handleClose}>\n          I've Saved This Key\n        </SolidButton>\n      </SolidDialogFooter>\n    </SolidDialog>\n  );\n}\n"]}

package/dist/components/core/users/ApiKeysTab/RevealApiKeyModal.tsx

@@ -4,6 +4,7 @@ import {
   SolidButton,
   SolidDialog,
   SolidDialogBody,
+  SolidDialogDescription,
   SolidDialogFooter,
   SolidDialogHeader,
   SolidDialogSeparator,
@@ -33,58 +34,40 @@ export function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiK
   };
 
   return (
-    <SolidDialog open={open} onOpenChange={handleClose} dismissible={false} style={{ maxWidth: 520 }}>
-      <SolidDialogHeader>
+    <SolidDialog
+      open={open}
+      onOpenChange={handleClose}
+      dismissible={false}
+      style={{ maxWidth: 520 }}
+      className="solid-api-key-dialog solid-api-key-dialog--reveal"
+    >
+      <SolidDialogHeader className="solid-api-key-dialog-header">
         <SolidDialogTitle>API Key Created</SolidDialogTitle>
+        <SolidDialogDescription>
+          Copy this key now and store it in a secure place before closing this dialog.
+        </SolidDialogDescription>
       </SolidDialogHeader>
       <SolidDialogSeparator />
-      <SolidDialogBody>
-        <div className="solid-api-key-reveal-warning flex align-items-start gap-2 mb-4">
-          <AlertTriangle size={16} className="flex-shrink-0 mt-1" />
-          <p className="m-0" style={{ fontSize: 13 }}>
-            <strong>Copy this key now.</strong> It will not be shown again once you close this dialog. Store it somewhere secure.
+      <SolidDialogBody className="solid-api-key-dialog-body">
+        <div className="solid-api-key-reveal-warning">
+          <AlertTriangle size={16} className="solid-api-key-reveal-warning-icon" />
+          <p className="m-0">
+            <strong>Shown only once.</strong> After this dialog closes, the raw key cannot be retrieved again.
           </p>
         </div>
 
-        <p className="form-field-label mb-2">
-          {keyName}
-        </p>
+        <p className="form-field-label mb-2">{keyName}</p>
 
-        <div
-          className="solid-api-key-reveal-box flex align-items-center gap-2 p-3"
-          style={{
-            background: "var(--solid-surface-secondary, #f5f5f5)",
-            borderRadius: 6,
-            border: "1px solid var(--solid-border-color, #e0e0e0)",
-          }}
-        >
-          <code
-            className="flex-1"
-            style={{
-              fontFamily: "monospace",
-              fontSize: 13,
-              wordBreak: "break-all",
-              userSelect: "all",
-            }}
-          >
-            {apiKey}
-          </code>
+        <div className="solid-api-key-reveal-box">
+          <code className="solid-api-key-reveal-code">{apiKey}</code>
           <button
             type="button"
             title={copied ? "Copied!" : "Copy to clipboard"}
             onClick={handleCopy}
-            style={{
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              padding: "4px",
-              display: "flex",
-              alignItems: "center",
-              flexShrink: 0,
-            }}
+            className="solid-api-key-reveal-copy"
           >
             {copied ? (
-              <CheckCircle size={16} style={{ color: "var(--solid-success-color, #22c55e)" }} />
+              <CheckCircle size={16} className="solid-api-key-reveal-copy-success" />
             ) : (
               <Copy size={16} />
             )}
@@ -92,13 +75,11 @@ export function RevealApiKeyModal({ open, apiKey, keyName, onClose }: RevealApiK
         </div>
 
         {copied && (
-          <p className="m-0 mt-2" style={{ fontSize: 12, color: "var(--solid-success-color, #22c55e)" }}>
-            Copied to clipboard!
-          </p>
+          <p className="solid-api-key-reveal-copied m-0 mt-2">Copied to clipboard.</p>
         )}
       </SolidDialogBody>
       <SolidDialogSeparator />
-      <SolidDialogFooter>
+      <SolidDialogFooter className="solid-api-key-dialog-footer">
         <SolidButton variant="outline" onClick={handleClose}>
           Close
         </SolidButton>