fix key rotation settings

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

@@ -1,9 +1,8 @@
 import React from "react";
-import { Form, Switch, Select, Typography, Tooltip } from "antd";
+import { Select, Tooltip, Divider, Switch } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { TextInput } from "@tremor/react";
 
-const { Text } = Typography;
 const { Option } = Select;
 
 interface KeyLifecycleSettingsProps {
@@ -22,67 +21,75 @@ const KeyLifecycleSettings: React.FC<KeyLifecycleSettingsProps> = ({
   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="space-y-6">
+      {/* Key Expiry Section */}
+      <div className="space-y-4">
+        <span className="text-sm font-medium text-gray-700">Key Expiry Settings</span>
 
-      <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' }} />
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700 flex items-center space-x-1">
+            <span>Expire Key</span>
+            <Tooltip title="Set when this key should expire. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days)">
+              <InfoCircleOutlined className="text-gray-400 cursor-help text-xs" />
             </Tooltip>
-          </div>
-          <Switch
-            checked={autoRotationEnabled}
-            onChange={onAutoRotationChange}
-            size="default"
+          </label>
+          <TextInput
+            name="duration"
+            placeholder="e.g., 30d"
+            className="w-full"
           />
         </div>
+      </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"
-            >
+      <Divider />
+
+      {/* Auto-Rotation Section */}
+      <div className="space-y-4">
+        <span className="text-sm font-medium text-gray-700">Auto-Rotation Settings</span>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-700 flex items-center space-x-1">
+              <span>Enable Auto-Rotation</span>
+              <Tooltip title="Key will automatically regenerate at the specified interval for enhanced security.">
+                <InfoCircleOutlined className="text-gray-400 cursor-help text-xs" />
+              </Tooltip>
+            </label>
+            <Switch
+              checked={autoRotationEnabled}
+              onChange={onAutoRotationChange}
+              size="default"
+              className={autoRotationEnabled ? "" : "bg-gray-400"}
+            />
+          </div>
+
+          {autoRotationEnabled && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-gray-700 flex items-center space-x-1">
+                <span>Rotation Interval</span>
+                <Tooltip title="How often the key should be automatically rotated. Choose the interval that best fits your security requirements.">
+                  <InfoCircleOutlined className="text-gray-400 cursor-help text-xs" />
+                </Tooltip>
+              </label>
               <Select
                 value={rotationInterval}
                 onChange={onRotationIntervalChange}
-                style={{ width: '200px' }}
+                className="w-full"
                 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>
+                <Option value="180d">180 days</Option>
+                <Option value="365d">365 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>
+
+        {autoRotationEnabled && (
+          <div className="bg-blue-50 p-3 rounded-md text-sm text-blue-700">
+            When rotation occurs, you'll receive a notification with the new key. The old key will be deactivated after a brief grace period.
           </div>
         )}
       </div>

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

@@ -335,6 +335,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
           rotation_interval: rotationInterval
         };
       }
+
+      // Handle duration field for key expiry
+      if (formValues.duration) {
+        formValues.duration = formValues.duration;
+      }
       
       // Update the formValues with the final metadata
       formValues.metadata = JSON.stringify(metadata);
@@ -1058,7 +1063,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
 
                   <Accordion className="mt-4 mb-4">
                     <AccordionHeader>
-                      <b>Key Expiry & Auto-Rotation</b>
+                      <b>Key Lifecycle</b>
                     </AccordionHeader>
                     <AccordionBody>
                       <div className="mt-4">