replace upperFirst with capitalize

Author: rudransh-shrivastava

frontend/src/app/mentorship/programs/[programKey]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import upperFirst from 'lodash/upperFirst'
+import { capitalize } from 'lodash'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { ErrorDisplay } from 'app/global-error'
@@ -69,7 +69,7 @@ const ProgramDetailsPage = () => {
   }
 
   const programDetails = [
-    { label: 'Status', value: upperFirst(program.status?.toLowerCase()) },
+    { label: 'Status', value: capitalize(program.status) },
     { label: 'Start Date', value: formatDate(program.startedAt) },
     { label: 'End Date', value: formatDate(program.endedAt) },
     { label: 'Mentees Limit', value: String(program.menteesLimit) },

frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import upperFirst from 'lodash/upperFirst'
+import { capitalize } from 'lodash'
 import { useParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
@@ -48,7 +48,7 @@ const ModuleDetailsPage = () => {
   }
 
   const moduleDetails = [
-    { label: 'Experience Level', value: upperFirst(module.experienceLevel) },
+    { label: 'Experience Level', value: capitalize(module.experienceLevel) },
     { label: 'Start Date', value: formatDate(module.startedAt) },
     { label: 'End Date', value: formatDate(module.endedAt) },
     {

frontend/src/app/my/mentorship/programs/[programKey]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useMutation, useQuery } from '@apollo/client/react'
 import { addToast } from '@heroui/toast'
-import upperFirst from 'lodash/upperFirst'
+import { capitalize } from 'lodash'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import { useEffect, useMemo, useState } from 'react'
@@ -79,7 +79,7 @@ const ProgramDetailsPage = () => {
       })
 
       addToast({
-        title: `Program status updated to ${upperFirst(newStatus.toLowerCase())}`,
+        title: `Program status updated to ${capitalize(newStatus)}`,
         description: 'The status has been successfully updated.',
         variant: 'solid',
         color: 'success',
@@ -127,7 +127,7 @@ const ProgramDetailsPage = () => {
   }
 
   const programDetails = [
-    { label: 'Status', value: upperFirst(program.status.toLowerCase()) },
+    { label: 'Status', value: capitalize(program.status) },
     { label: 'Start Date', value: formatDate(program.startedAt) },
     { label: 'End Date', value: formatDate(program.endedAt) },
     { label: 'Mentees Limit', value: String(program.menteesLimit) },

frontend/src/components/ModuleCard.tsx

@@ -6,7 +6,7 @@ import {
   faHourglassHalf,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import upperFirst from 'lodash/upperFirst'
+import { capitalize } from 'lodash'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import type { Module } from 'types/mentorship'
@@ -82,7 +82,7 @@ const ModuleItem = ({ details }: { details: Module }) => {
       >
         <TruncatedText text={details?.name} />
       </button>
-      <TextInfoItem icon={faLevelUpAlt} label="Level" value={upperFirst(details.experienceLevel)} />
+      <TextInfoItem icon={faLevelUpAlt} label="Level" value={capitalize(details.experienceLevel)} />
       <TextInfoItem icon={faCalendarAlt} label="Start" value={formatDate(details.startedAt)} />
       <TextInfoItem
         icon={faHourglassHalf}

frontend/src/components/SingleModuleCard.tsx

@@ -1,6 +1,6 @@
 import { faUsers, faEllipsisV } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import upperFirst from 'lodash/upperFirst'
+import { capitalize } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
@@ -51,7 +51,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({
   }
 
   const moduleDetails = [
-    { label: 'Experience Level', value: upperFirst(module.experienceLevel.toLowerCase()) },
+    { label: 'Experience Level', value: capitalize(module.experienceLevel) },
     { label: 'Start Date', value: formatDate(module.startedAt) },
     { label: 'End Date', value: formatDate(module.endedAt) },
     { label: 'Duration', value: getSimpleDuration(module.startedAt, module.endedAt) },