Fixing minor bugs for custom environments

frontend/components/basic/Listbox.tsx

@@ -48,7 +48,7 @@ export default function ListBox({
             {text}
             <span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300">
               {' '}
-              {selected}
+              {selected?.charAt(0).toUpperCase() + selected?.slice(1)}
             </span>
           </div>
           {data && (

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -66,7 +66,7 @@ const AddServiceTokenDialog = ({
     let newServiceToken = await addServiceToken({
       name: serviceTokenName,
       workspaceId,
-      environment: selectedServiceTokenEnv.slug,
+      environment: selectedServiceTokenEnv?.slug ? selectedServiceTokenEnv.slug : environments[0]?.name,
       expiresIn: expiryMapping[serviceTokenExpiresIn],
       encryptedKey: ciphertext,
       iv, 
@@ -156,7 +156,7 @@ const AddServiceTokenDialog = ({
                     </div>
                     <div className='max-h-28 mb-2'>
                       <ListBox
-                        selected={selectedServiceTokenEnv?.name}
+                        selected={selectedServiceTokenEnv?.name ? selectedServiceTokenEnv?.name : environments[0]?.name}
                         data={environments.map(({ name }) => name)}
                         onChange={(envName) =>
                           setSelectedServiceTokenEnv(