Add key expiry and auto-rotation settings

- Create KeyLifecycleSettings component grouping expiry and auto-rotation
- Add dedicated 'Key Expiry & Auto-Rotation' accordion section
- Fix auto-rotation toggle visibility with proper layout
- Move expire key field from Optional Settings to new section
- Remove old AutoRotationSettings component
- Integrate auto-rotation metadata in form submission

ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { Form, Switch, Select, Typography, Tooltip } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { TextInput } from "@tremor/react";
+
+const { Text } = Typography;
+const { Option } = Select;
+
+interface KeyLifecycleSettingsProps {
+  form: any; // Form instance from parent
+  autoRotationEnabled: boolean;
+  onAutoRotationChange: (enabled: boolean) => void;
+  rotationInterval: string;
+  onRotationIntervalChange: (interval: string) => void;
+}
+
+const KeyLifecycleSettings: React.FC<KeyLifecycleSettingsProps> = ({
+  form,
+  autoRotationEnabled,
+  onAutoRotationChange,
+  rotationInterval,
+  onRotationIntervalChange,
+}) => {
+  return (
+    <div className="space-y-4">
+      <Form.Item
+        label={
+          <span>
+            Expire Key{' '}
+            <Tooltip title="Set when this key should expire. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days)">
+              <InfoCircleOutlined style={{ marginLeft: '4px' }} />
+            </Tooltip>
+          </span>
+        }
+        name="duration"
+        className="mb-4"
+      >
+        <TextInput placeholder="e.g., 30d" />
+      </Form.Item>
+
+      <div className="mb-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Text className="text-sm font-medium text-gray-700">Enable Auto-Rotation</Text>
+            <Tooltip title="Automatically rotate this API key at regular intervals for enhanced security. A new key will be generated and the old one will be deactivated.">
+              <InfoCircleOutlined className="text-gray-400" style={{ fontSize: '14px' }} />
+            </Tooltip>
+          </div>
+          <Switch
+            checked={autoRotationEnabled}
+            onChange={onAutoRotationChange}
+            size="default"
+          />
+        </div>
+
+        {autoRotationEnabled && (
+          <div className="ml-4 pl-4 border-l-2 border-gray-200">
+            <Form.Item
+              label={
+                <span>
+                  Rotation Interval{' '}
+                  <Tooltip title="How often the key should be automatically rotated. Choose the interval that best fits your security requirements.">
+                    <InfoCircleOutlined style={{ marginLeft: '4px' }} />
+                  </Tooltip>
+                </span>
+              }
+              name="rotation_interval"
+              className="mb-2"
+            >
+              <Select
+                value={rotationInterval}
+                onChange={onRotationIntervalChange}
+                style={{ width: '200px' }}
+                placeholder="Select interval"
+              >
+                <Option value="7d">7 days</Option>
+                <Option value="30d">30 days</Option>
+                <Option value="60d">60 days</Option>
+                <Option value="90d">90 days</Option>
+              </Select>
+            </Form.Item>
+            
+            <Text className="text-xs text-gray-500 block">
+              When rotation occurs, you'll receive a notification with the new key. The old key will be deactivated after a brief grace period.
+            </Text>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default KeyLifecycleSettings;

ui/litellm-dashboard/src/components/organisms/create_key_button.tsx

@@ -34,6 +34,7 @@ import { callback_map, mapDisplayToInternalNames } from "../callback_info_helper
 import MCPServerSelector from "../mcp_server_management/MCPServerSelector"
 import ModelAliasManager from "../common_components/ModelAliasManager"
 import NotificationsManager from "../molecules/notifications_manager"
+import KeyLifecycleSettings from "../common_components/KeyLifecycleSettings"
 
 const { Option } = Select;
 
@@ -169,6 +170,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   const [disabledCallbacks, setDisabledCallbacks] = useState<string[]>([]);
   const [keyType, setKeyType] = useState<string>("default");
   const [modelAliases, setModelAliases] = useState<{ [key: string]: string }>({});
+  const [autoRotationEnabled, setAutoRotationEnabled] = useState<boolean>(false);
+  const [rotationInterval, setRotationInterval] = useState<string>("30d");
 
   const handleOk = () => {
     setIsModalVisible(false);
@@ -177,6 +180,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
     setDisabledCallbacks([]);
     setKeyType("default");
     setModelAliases({});
+    setAutoRotationEnabled(false);
+    setRotationInterval("30d");
   };
 
   const handleCancel = () => {
@@ -188,6 +193,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
     setDisabledCallbacks([]);
     setKeyType("default");
     setModelAliases({});
+    setAutoRotationEnabled(false);
+    setRotationInterval("30d");
   };
 
   useEffect(() => {
@@ -320,6 +327,15 @@ const CreateKey: React.FC<CreateKeyProps> = ({
         };
       }
       
+      // Add auto-rotation settings to the metadata
+      if (autoRotationEnabled) {
+        metadata = {
+          ...metadata,
+          auto_rotation_enabled: true,
+          rotation_interval: rotationInterval
+        };
+      }
+      
       // Update the formValues with the final metadata
       formValues.metadata = JSON.stringify(metadata);
 
@@ -823,20 +839,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   >
                     <NumericalInput step={1} width={400} />
                   </Form.Item>
-                  <Form.Item
-                    label={
-                      <span>
-                        Expire Key{' '}
-                        <Tooltip title="Set when this key should expire. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days)">
-                          <InfoCircleOutlined style={{ marginLeft: '4px' }} />
-                        </Tooltip>
-                      </span>
-                    }
-                    name="duration"
-                    className="mt-4"
-                  >
-                    <TextInput placeholder="e.g., 30d" />
-                  </Form.Item>
                   <Form.Item 
                     label={
                       <span>
@@ -1053,6 +1055,23 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                       </div>
                     </AccordionBody>
                   </Accordion>
+
+                  <Accordion className="mt-4 mb-4">
+                    <AccordionHeader>
+                      <b>Key Expiry & Auto-Rotation</b>
+                    </AccordionHeader>
+                    <AccordionBody>
+                      <div className="mt-4">
+                        <KeyLifecycleSettings
+                          form={form}
+                          autoRotationEnabled={autoRotationEnabled}
+                          onAutoRotationChange={setAutoRotationEnabled}
+                          rotationInterval={rotationInterval}
+                          onRotationIntervalChange={setRotationInterval}
+                        />
+                      </div>
+                    </AccordionBody>
+                  </Accordion>
                   <Accordion className="mt-4 mb-4">
                     <AccordionHeader>
                     <div className="flex items-center gap-2">